这是我的代码。
$(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时,滑块颜色没有按顺序改变。 所以任何人都可以帮助我。
答案 0 :(得分: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';
}