Question

我想构建一个带有两个手柄的滑块，手柄值显示在手柄内或手柄上方。到目前为止我已经完成了。

$( "#slider" ).slider({
    range: true,
    min: 3600,
        max: 86400,
    values: [ 28800, 86400 ]
});

Answer 1

见Demo。如果您有任何疑惑，请不要犹豫，问我。

<强> HTML

<body>
    <div id="slider-range"></div>
</body>

<强>的JavaScript

$(function () {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 500,
        values: [75, 300],
        slide: function (event, ui) {
            var value1 = $("#slider-range").slider("values", 0);
            var value2 = $("#slider-range").slider("values", 1);
            $("#slider-range").find(".ui-slider-handle:first").text(value1);
                        $("#slider-range").find(".ui-slider-handle:last").text(value2);
        }
    });
});

<强> CSS

.ui-slider-handle{
    width: 35px !important;
    font-size: small !important;
    color: #FF0000 !important;
    text-align: center !important;
}

带有jQuery UI的滑块值显示 - 2个句柄

1 个答案: