如何从JS中改变RangeSlider颜色

Question

我从JS中动态地创建了下面的代码范围滑块

$.get(PATH_DYNAMIC_PAGE + 'tempCreateScheduleNew.html', function (data) {
    $('#content').html('<div data-role="rangeslider" id="temperatureRangeSlider2"></div>');
    $('[data-role="rangeslider"]').append('<label for="range-2a">Time:</label>');
    $('[data-role="rangeslider"]').append('<input name="range-2a" id="range-2a" min="0" max="1440" step="15" type="range">');
    $('[data-role="rangeslider"]').append('<label for="range-2b"></label>');
    $('[data-role="rangeslider"]').append('<input name="range-2b" id="range-2b" min="0" max="1440" value="1440" step="15" type="range">');
    $('#content').append('<div id="temperatureTimeValuesContainer2">');
    $('#temperatureTimeValuesContainer2').append('<input type="text" id="temperatureTimeValues2"/>');

    $('#content').trigger('create');
    $('#content').append(data);
}

现在，我想用JS中的其他颜色动态地更改滑块中选定部分的颜色。我尝试了下面的代码，但似乎不起作用。

$('#temperatureRangeSlider2').on('slidestop',
    function () {   
        //var color = getColor();
        $('.ui-widget-header').css('background','green');
        $('#temperatureRangeSlider2').rangeslider('refresh');
    });

你能帮我把这事做好吗？

Answer 1

你可以试试这个

$('#temperatureRangeSlider2').on('slidestop',function () {   
    //var color = getColor();
    $('.ui-slider-track .ui-slider-bg.ui-btn-active').removeClass('ui-btn-active').css('background-color','red');
    $('#temperatureRangeSlider2').rangeslider('refresh');
});

注意:如果一页中有多个滑块，则此代码将影响所有滑块。

Answer 2

假设您正在使用jquery滑块，如果您只想更改所选portion.....this的颜色，则可以使用css。

div.ui-slider-range.ui-widget-header {
    background: red;
}

使用javascript，您应该能够动态地应用相同的css。

$('div.ui-slider-range.ui-widget-header').css('background','green');