Question

我试图包含min＆amp;的值。 jQuery UI Slider的最大变量到标签，我想在滑块手柄下滚动。

min和max的值应包含在以下标记中：

以下是jQuery：

jQuery(document).ready(function () {
            jQuery('#slider-container').slider({
                range: true,
                min: 1200,
                max: 34000,
                values: [1200, 34000],
                create: function () {
                    jQuery("#amount").val("$1,200 - $34,000");
                },
                slide: function (event, ui) {
                    jQuery("#amount").val("$" + ui.values[0] + "$" + ui.values[1]);
                    var mi = ui.values[0];
                    var mx = ui.values[1];
                    filterSystem(mi, mx);
                }
            })
        });

        function filterSystem(minPrice, maxPrice) {
            jQuery("li.column").hide().filter(function () {
                var price = parseInt(jQuery(this).data("price"), 10);
                return price >= minPrice && price <= maxPrice;
            }).show();
        }

值应该沿着滑块手柄一边滚动，怎么做？

这里是JSFiddle

Answer 1

您可以在幻灯片事件中读取滑块手柄位置：

HTML：

<div class="cs-widget">
<h3>Price Range</h3>

    <div class="cs-widget-content">
        <div id="slider-container"></div>
        <span class="min-value"></span>
        <span class="max-value"></span>
        <p class="clearfix">
        <input type="text" readonly id="amount" class="price-range" />
        </p>
        <div id="slider-range"></div>
      </div>
</div>

CSS：

.ui-slider {
    position: relative;
    text-align: left;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.1em;
    height: 1.1em;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
    outline: none;
    background: #000;
    border-radius:50% 50%;
    border:1px solid #888;
    color:#fff;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
    background-color:#555;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit;
}

.ui-slider-horizontal {
    height: .5em;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.5em;
    margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0px;
    height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
    content: "<";
}


/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1em;
}
.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #ccc;
    color: #222222;
}
.ui-widget-content a {
    color: #222222;
}
.ui-widget-header {
    border: 1px solid #aaaaaa;
    background: #000;
    color: #222222;
    font-weight: bold;

}
.ui-widget-header a {
    color: #222222;
}

.min-value, .max-value {
    position: absolute;
    top: 20px;
}

.cs-widget-content {
    position: relative;
}

JavaScript的：

jQuery(document).ready(function () {
            jQuery('#slider-container').slider({
                range: true,
                min: 1200,
                max: 34000,
                values: [1200, 34000],
                create: function () {
                    jQuery("#amount").val("$1,200 - $34,000");
                },
                slide: function (event, ui) {
                    jQuery("#amount").val("$" + ui.values[0] + "$" + ui.values[1]);
                    var mi = ui.values[0];
                    var mx = ui.values[1];
                    filterSystem(mi, mx);
                    $('.min-value').text(mi).css({left: $('#slider-container .ui-slider-handle:nth-child(2)').css('left')});
                    $('.max-value').text(mx).css({left: $('#slider-container .ui-slider-handle:last-child').css('left')});
                }
            })
        });

        function filterSystem(minPrice, maxPrice) {
            jQuery("li.column").hide().filter(function () {
                var price = parseInt(jQuery(this).data("price"), 10);
                return price >= minPrice && price <= maxPrice;
            }).show();
        }

演示fiddle

jQuery UI Slider - Min＆amp;最大值包含在<span>标记中

1 个答案: