How to do a Round Slider

HTML-CSS
1

What’s the simplest way to do a round slider? given an input like this:

<input type="range" id="myRange" value="1" max="100">

This is just a regular straight input range, I am trying to do something like this:

Can this be done only with CSS or will I need JavaScript for this task?

3

That’s what I’m wondering about, but I can’t find any CSS example for some reason. I just want to be able to make the input round with only CSS, I know that I will need JavaScript to display the value.

5

You can’t just use CSS to turn an input range into a round slider. For a round slider you need to handle all yourself, that means, you need to create it from scratch.

Here is an example of mine:

1 Like
6

I am using a jQuery plugin called roundslider, if any one has ever used this plugin before I’d appreciate a hand to help me custom the round slider.

It seems I can’t use linear gradient for the progress bar and I also need to add some elements inside the slider (on top and below of the value). This is what Im trying to do:

06%20PM

And here’s what I have:

59%20PM

7

@Gilbert1391, are you still faced any difficulties to customize the round slider? you can also post your query in roundslider website…

8

I managed to do it, thank you.

9

Find working code below:

<div id="roundslider1" class="roundslider"></div>
<div id="roundslider2" class="roundslider"></div>
<div id="roundslider3" class="roundslider"></div>

<script>
$("#roundslider1").roundSlider({
    sliderType: "default",
    value: 50
});

$("#roundslider2").roundSlider({
    sliderType: "min-range",
    value: 50
});

$("#roundslider3").roundSlider({
    sliderType: "range",
    value: "20,50"
});
</script>