CODEWITHSUNDEEP
css
Gilbert R.
Gilbert R.

Reputation: 292

Round Slider with CSS

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:

enter image description here

Can this be done only with CSS or will I need JavaScript for this task?, if so, is there any easy to read example?, no jQuery, by the way. Thanks in advance.

Upvotes: 2

Views: 7053

Answers (1)

Parth Raval
Parth Raval

Reputation: 4423

Explanation:- You need to use jquery, roundslider.css & roundslider.js 

// you need to bind `.roundSlider()` with the `id = 'myRange'`.
$("#myRange").roundSlider({
    sliderType: "min-range",
    handleShape: "round",
    width: 22, // width of the roundSlider
    radius: 100, // radius size
    value: 60 // value you want to apply
});

$("#myRange1").roundSlider({
    width: 22, // width of the roundSlider
    radius: 100, // radius size
    value: 60 // value you want to apply
});
#myRange {
    margin-bottom: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.js"></script>
<input type="range" id="myRange">
<input type="range" id="myRange1">

Upvotes: 3

Related Questions