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

本文介绍了带有jQuery UI的滑块值显示-2个句柄的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I want to build a slider with two handles with the handle value displayed within the handles or above them. I have done so far.

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

推荐答案

请参阅此演示.如果您有任何困惑，请随时问我.

See this Demo . IF you have any confusions, don't hesitate to ask me.

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个句柄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！