Question

这是我的代码。

$(function () {
$("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [25, 50],
    slide: function (event, ui) {
        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
        console.log(ui.values[1] +'%');
        $('#YourDiv').css('width', 100 - ui.values[1] +'%');
    }
}).append('<div id="YourDiv" style="width: 50%"></div>');

$("#amount").val("$" + $("#slider-range").slider("values", 0) +
    " - $" + $("#slider-range").slider("values", 1));});

然后当我将最大值更改为200时，滑块颜色没有按顺序改变。所以任何人都可以帮助我。

Answer 1

这是在达到最大值200时更改颜色的代码。

$("#slider-range").slider({
        range: true,
        min: 0,
        max: 200,
        animate: true,
         values: [25, 75],
        start: function( event, ui ) {
            $(ui.handle).find('.ui-slider-tooltip').fadeIn();
        },

        stop: function( event, ui ) {
            $(ui.handle).find('.ui-slider-tooltip').fadeIn();
        },

        slide: function(event, ui) {
            $(ui.handle).find('.ui-slider-tooltip').text(ui.value+' km/hr');
               $('#YourDiv').css('width', 100 - (ui.values[1]/2) +'%');
        },

        create: function( event, ui ) {
            var tooltip = $('<div class="ui-slider-tooltip" />').css({
                position: 'absolute',
                top: '-28px',
                left: '-1px',
                width:'80px'
            });
            $(event.target).find('.ui-slider-handle').append(tooltip);

            // get handles and set up values
            var firstHandle  = $(event.target).find('.ui-slider-handle')[0];
            var secondHandle = $(event.target).find('.ui-slider-handle')[1];
            firstHandle.firstChild.innerText = 25+' km/hr';
            secondHandle.firstChild.innerText = 75+' km/hr';
        }

Jquery范围滑块更改背景颜色

1 个答案: