Slider Value Display with jQuery UI - 2 handles

2019-08-13 19:26发布

站内问答 / jQuery
1491 1 5

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 ]
});

1条回答
祖国的老花朵
2楼-- · 2019-08-13 20:08

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;
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)