0

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.

enter image description here

Thanks in advance

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
abhay jain
  • 3
  • 3

1 Answers1

1

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:

time selection with round slider

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>
Soundar
  • 2,569
  • 1
  • 16
  • 24
  • Very good answer, but don't forget to post the code you used. This is useful in case any of the websites you refer to go down. Copy-pasting the JS code into your post here on SO should be enough to give OP an idea. – Bram Vanroy Sep 21 '15 at 19:33
  • It's look exact what i want but that plugin doesn't fullfill my requirement i need a input field in timer too so that user can write instead of fill that circle like jquery-knob do so there is any way thing can be done using knob plugin or u can recommend a plugin that feature is same as jquery-knob – abhay jain Sep 22 '15 at 17:30
  • need input field means what you meant ? are you need the editable input box in the center place ah ? like this demo http://jsfiddle.net/soundar24/fe7j3ohv/38/ – Soundar Sep 22 '15 at 19:01
  • yup something like that. Thank u – abhay jain Sep 23 '15 at 17:55