CODEWITHSUNDEEP
jquerysliderrangejquery-knob
Max
Max

Reputation: 1

Round Jquery UI slider

I'm looking for something similar to jqueryui slide.

But the main problem in my case it's round design for slider. I've seen Knob control but it doesn't have range and control buttons.

Shoot me a link if you know such an example. Thanks.

Upvotes: 0

Views: 4913

Answers (2)

Soundar
Soundar

Reputation: 2589

Check the jQuery roundSlider plugin from here http://roundsliderui.com/. This is what you want exactly.

This roundslider having the similar options like the jQuery ui slider. It support default, min-range and range slider type. Not only the round slider it also supports various circle shapes such as quarter, half and pie circle shapes.

For more details check the demos and documentation page.

Please check the demo from jsFiddle.

Live demo:

$("#slider").roundSlider({
    sliderType: "range",
    value: "20,80"
});
#slider{
  margin: 10px auto 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css" rel="stylesheet"/>

<div id="slider"></div>

Screenshots with different theming:

round slider - different theme and appearance circular slider - different theme and appearance radial slider - different theme and appearance

Check more details about different theme from here.

Upvotes: 1

Akash Deep Singhal
Akash Deep Singhal

Reputation: 186

Check out this example at interface.eyecon.ro, it has a circle and a draggable handle and from looking at the page source it's not too complicated.

Upvotes: 0

Related Questions