I want to do something like this image but I don't know how. Please help me and show me the path to draw circle cursor in knob plugin.
Thanks in advance
You can use jQuery roundSlider plugin for this requirement. So you can customize the appearance and functionalities based on your requirement.
Here is the demo same as your requirement: jsFiddle
Screenshot:
For more details check the demos and documentation page.
.
[ Updated the codes ]
$("#slider").roundSlider({
sliderType: "min-range",
handleShape: "round",
width: 8,
radius: "80",
handleSize: "+10",
startAngle: 270,
editableTooltip: false,
min: 1,
max: 12,
tooltipFormat: function(args) {
return args.value + " Hour";
}
});
$("#slider").roundSlider({ value: 4 });
.rs-control .rs-range-color {
background-color: #ff9700;
}
.rs-control .rs-path-color {
background-color: #5b4b28;
}
.rs-control .rs-handle {
background-color: #7dc98f;
}
.rs-border {
border-width: 0;
}
.rs-tooltip-text {
font-size: 28px;
color: #5B4B28;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css">
<script type='text/javascript' src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
<div id="slider"></div>