How to do a Round Slider

How to do a Round Slider
0

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?

You will need JavaScript. You can look at the jQuery code to see the JavaScript code used to make it work.

Edit: When I say work, I mean the functionality of the slider. The actual round slider should be just CSS.

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.

Based on a quick search, it seems the CSS and JavaScript needed will be fairly complicated. There are some other libraries which do not use jQuery, which you might consider.

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

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

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

I managed to do it, thank you.

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>