JQuery的滑塊與固定最小值

Question

我試圖使滑塊其中：

• 最小/最大的值是0/100％（即我能做到）
• 它有一個固定的第一值這是不能改變和填充顏色（比如說例如30％）
• 它有一個處理程序來完成以前的值（例如：從30％到100％），並將被填充另一種顏色。

這是它應該看起來像。 '='是固定的第一個值，' - '是我們添加的，'_'是剩下的：

[=== | _ ____]第一

[=== ------ | _當我們移動處理器

我試圖用一個範圍滑塊，使之，隱藏第一處理程序，但我遇到了顏色問題。我所做的只是爲整個背景添加色彩，這不是我的目標。

Answer 1

爲每個處理程序創建一個帶有背景顏色的div並將它們附加到滑塊。

$(document).ready(function() { 
var minFixedValue = 10; 
var maxValue = 30; 
var updateEvent = function (event, ui) { 

    if (ui != undefined) { 
     var index = $(ui.handle).index(); 
     if (index === 1) return false; 
    } 

    $('#slide1 .slide-back').remove(); 
    var backgrouldColorSettings = ['blue', 'grey'] 
    $($('#slide1 a').get().reverse()).each(function (i) { 
     $('#slide1').append(
     $('<div></div>').addClass('slide-back') 
      .width($(this).offset().left - 5) 
      .css('background', backgrouldColorSettings[i])); 
    }); 
}; 
$('#slide1').slider({ 
    range: true, 
    slide: updateEvent, 
    change: updateEvent, 
    values: [minFixedValue, maxValue] 
}); 

updateEvent(); 
}); 

見jsFilddler here