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.

回答1:

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:

Check more details about different theme from here.

回答2:

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.

来源：https://stackoverflow.com/questions/14067248/round-jquery-ui-slider