將顏色限制到滑塊位置

我設計了一個滑塊問題，使用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); 
}

來源

2017-04-14 sandeep kapalawai

希望這有助於...

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" /> 

<style type="text/css"> 

    #custom-handle { 
     width: 3em; 
     height: 1.6em; 
     top: 50%; 
     margin-top: -.8em; 
     text-align: center; 
     line-height: 1.6em; 
    } 

    #slider { 
     background-color:#8c464f; 
     filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#8c464f, endColorstr=#828c46); 
     background-image:-moz-linear-gradient(left, #8c464f 0%, #828c46 25%,#468c5f 100%); 
     background-image:linear-gradient(left, #8c464f 0%, #828c46 25%,#468c5f 100%); 
     background-image:-webkit-linear-gradient(left, #8c464f 0%, #828c46 25%,#468c5f 100%); 
     background-image:-o-linear-gradient(left, #8c464f 0%, #828c46 25%,#468c5f 100%); 
     background-image:-ms-linear-gradient(left, #8c464f 0%, #828c46 25%,#468c5f 100%); 
     background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#8c464f), color-stop(25%,#828c46),color-stop(100%,#468c5f)); 
    } 

    .ui-widget-header{background-image:none;background-color:#FFFFFF;} 
    .ui-widget-content { background: #FFCCCC; } 


</style> 

<title>color slider </title> 

</head> 

<body> 
<div id="slider" class="slider "> 
    <div id="custom-handle" class="ui-slider-handle"></div> 
</div> 

    <script> 
    $(function() { 

     var handle = $("#custom-handle"); 
     $("#slider").slider({ 

      range: "max", 
      step: 2, 
      animate: 0, 


     create: function() { 
      handle.text($(this).slider("value")); 
     }, 
     slide: function(event, ui) { 
      handle.text(ui.value); 
     } 
     }); 


    }); 

    </script>

來源

2017-04-15 06:58:01

將顏色限制到滑塊位置

回答

相關問題