i'm trying to create a curved slider with jquery like this:
with no success.
can anyone point be to the right direction?
Thanks allot
Avi
This is what you want exactly. By using the jQuery roundSlider plugin you can make any type of arc slider with custom appearance.
Please check this jsFiddle for the demo of you requirement.
Live demo:
$(#arc-slider).roundSlider({
sliderType: min-range,
circleShape: custom-quarter,
value: 75,
startAngle: 45,
editableTooltip: true,
radius: 350,
width: 6,
handleSize: +32,
tooltipFormat: function (args) {
return args.value + %;
}
});#arc-slider {
height: 110px !important;
width: 500px !important;
overflow: hidden;
padding: 15px;
}
#arc-slider .rs-container {
margin-left: -350px; /* here 350 is the radius value */
left: 50%;
}
#arc-slider .rs-tooltip {
top: 60px;
}
#arc-slider .rs-tooltip-text {
font-size: 25px;
}
#arc-slider .rs-border{
border-width: 0px;
}
/* Appearance related changes */
.rs-control .rs-range-color {
background-color: #54BBE0;
}
.rs-control .rs-path-color {
background-color: #5f5f5f;
}
.rs-control .rs-handle {
background-color: #51c5cf;
}<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=arc-slider class=rslider></div>Screenshots of the Output:
To know more about the roundSlider, please check the demos and documentation page.
