How to do a Round Slider

How to do a Round Slider
0

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


#2

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.


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


#4

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.


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


#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