Question

我设计了一个使用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);
}

Answer 1

希望这会有所帮助......

<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>

将颜色重新设置为滑块位置

1 个答案: