Question

我找到了这个jsfiddle link

我希望最小值为0。但是，当我将最小值设为0时，该值0是不可见的。如果我给它加步，那么它将直接从最大值中扣除很多。有人可以帮我吗？

function slide(event, ui) {
    // Allow time for exact positioning
    setTimeout(function () {
        $(ui.handle).attr('title', ui.value).tooltip('fixTitle').tooltip('show');
    }, 0);
}
function create(event, ui, start, end) {
    var handles = $(event.target).find('span');
    handles.eq(0).tooltip({
        animation: false,
        placement: 'top',
        trigger: 'manual',
        container: handles.eq(0),
        title: start
    }).tooltip('show');
    handles.eq(1).tooltip({
        animation: false,
        placement: 'top',
        trigger: 'manual',
        container: handles.eq(1),
        title: end
    }).tooltip('show');
}
$('#slider').slider({
    range: true,
    min: 1,
    max: 100,
    values: [1, 100],
    slide: function (event, ui) {
        slide(event, ui)
    },
    create: function (event, ui) {
        create(event, ui, $(this).slider('values', 0), $(this).slider('values', 1))
    }
});

Answer 1

尝试这样

$('#slider').slider({
    range: true,
    min: 0,
    max: 100,
    values: [0, 100],
    slide: function (event, ui) {
    slide(event, ui)
 }

Answer 2

尝试使用以下小提琴 http://jsfiddle.net/jL044k1c/130/

function slide(event, ui) {
    // Allow time for exact positioning
    setTimeout(function () {
        $(ui.handle).attr('title', ui.value).tooltip('fixTitle').tooltip('show');
    }, 0);
}
function create(event, ui, start, end) {
    var handles = $(event.target).find('span');

    handles.eq(0).tooltip({
        animation: false,
        placement: 'top',
        trigger: 'manual',
        container: handles.eq(0),
        title: start
    }).tooltip('show');
    handles.eq(1).tooltip({
        animation: false,
        placement: 'top',
        trigger: 'manual',
        container: handles.eq(1),
        title: end
    }).tooltip('show');
}
$('#slider').slider({
    range: true,
    min: 0,
    max: 100,
    values: [0, 100],
    slide: function (event, ui) {
        slide(event, ui)
    },
    create: function (event, ui) {

        create(event, ui, $(this).slider('values', 0), $(this).slider('values', 1))
    }
});
<div id="slider"></div>
body {
    padding: 100px;
}
.ui-slider-handle {
    outline: none;
}

但是它有一个小故障，因为第一次工具提示没有出现“ 0”值。

带有工具提示的jQuery Ui范围滑块不采用最小值0

2 个答案: