JQuery slider change background color and round handlers-CodePudding

So I've made a slider, but now I'm trying to style them to look like this.

How can I make handlers round?

And how can I make the sides which is out of range be greyed out, and inside green? I can't find any exampled/documentation to look at, so now I'm asking here.

$(document).ready(function() {
        $("#slider").slider({
            min: 1,
            max: 100,
            step: 1,
            values: [1, 100],
            slide: function(event, ui) {
                if ( ui.values[0] >= ui.values[1] ) {
                    return false;
                } else {
                    for (var i = 0; i < ui.values.length;   i) {
                            document.getElementById("spanMin").textContent= ui.values[1];    
                            document.getElementById("spanMax").textContent= ui.values[0];
                    }
                }
            }
        });
    
        $("input.sliderValue").change(function() {
            var $this = $(this);
            $("#slider").slider("values", $this.data("index"), $this.val());
        });
});

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}

.slidersStyle div, span {
  display: inline-block;
}

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">  
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form>
  <div class="slidersStyle">
      <span id="spanMax" style="display: inline-block;" class="sliderValue">1</span>
      <div style="width:200px; margin-left: 15px; margin-right: 15px;" id="slider">           </div>    
      <span id="spanMin" class="sliderValue">100</span>
  </div>
</form>

CodePudding user response：

here are your solution. Basically, used newest JQuery version, newest JQuery UI. JQuery UI CSS version is the same as yours. You can tweak and use your older versions, it should work as well.

$(document).ready(function() {
  
   $( "#slider-range" ).slider({
     range: true,
     min: 1,
     max: 100,
     values: [ 1, 100 ],
     slide: function( event, ui ) {
       $( "#min" ).val( ui.values[ 0 ] );
       $( "#max" ).val( ui.values[ 1 ] );
     }
   });
 });

body {
   font-family: Verdana, Arial, sans-serif;
   font-size: 12px;
}

#min   {
   width:14px;
}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
   border-radius: 50%!important;
}

.ui-slider .ui-slider-handle {
   width: 1.8em!important;
   height: 1.8em!important;
}

.ui-slider-horizontal .ui-slider-handle {
   top: -0.45em!important;
}

.ui-widget-content {
   background: #dddddd!important;
}

.ui-widget-header {
   background: #9ac836!important;

}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<form>
   <input type="text" id="min" value="1" readonly style="border:0; display:inline-block;">
   <div id="slider-range" style="width:200px; margin:0px 25px; display: inline-block;" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
   <div class="ui-slider-range ui-corner-all ui-widget-header" style=""></div>
      <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>
      <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>
   </div>
  <input type="text" id="max" value="100" readonly style="border:0; display:inline-block;">
</form>