JQuery slider change background color and round handlers

Question

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

user_12489824 · Answer

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;

}

JQuery slider change background color and round handlers

1 Answers