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滑块，如果您只想更改所选部分的颜色，则可以使用css执行此操作.....这应该可以使用

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

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

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

如何从JS更改RangeSlider颜色

2 个答案: