Making a customized range slider bar

Question

I am trying to make a customized range slider for temperature variation as seen in the image(the curved slider with a red handle):

I tried using the jQuery Range Slider and a fiddle I found, LINK : http://jsfiddle.net/soundar24/LpuLe9tr/3/

But I'm unable to divide the slider into parts(as seen in the image), with each part representing a temperature value.

Could someone please help me accomplishing this? Any suggestion would be helpful. Thanks

Answer 1

Add following to css to your code. You can change the value of border as per your requirement of no of parts:

#arc-slider .rs-border.rs-outer {
 border: 3px dotted #51c5cf;
}

#arc-slider .rs-border.rs-inner {
  border-width: 0px;
}