0
我设计了一个滑块问题,使用JS,因为当滑块将位置向左移动时,我们将显示红色颜色,并且中间我们将显示黄色,正如我们将显示的那样与绿色,但每当滑块移动它显示到滑块的总长度。我想限制颜色到滑块的位置。将颜色限制到滑块位置
$(document).ready(function(){
$('.slider_control').slider({
value:0,
range : 'min',
min: 0,
max: 100,
step: 1,
orientation: "horizontal",
change: function(e,ui){
var myid=$(this).parent().attr("id");
refreshSwatch(myid);
$(this).find("input").val(ui.value);
},
slide:function(e,ui){
var myid=$(this).parent().attr("id");
refreshSwatch(myid);
$(this).find("input").val(ui.value);
}
});
});
function getTheColor(colorVal){
var theColor = "";
if(colorVal<50){
myRed = 255;
myGreen = parseInt(((colorVal*2)*255)/100);
}
else {
myRed = parseInt(((100-colorVal)*2)*255/100);
myGreen = 255;
}
theColor = "rgb("+myRed+","+myGreen+",0)";
return(theColor);
}
function refreshSwatch(myid) {
var coloredSlider = $("#"+myid).find(".slider_control").slider("value");
console.log(coloredSlider);
myColor = getTheColor(coloredSlider);
//$(".slider_control.ui-slider-range").css("background-color",myColor);
$("#"+myid).find(".slider_control.ui-widget-content").css("background-color",myColor);
}