In IE9, animations are not supported, as they do not support CSS3 transition effects.

1. Include the jQuery roundSlider plugin’s stylesheet and JS information in your webpage which has the jQuery library.

<script src="jquery.min.js"></script>
<link href="src/roundSlider.css" rel="stylesheet" />
<script src="src/roundSlider.js"></script>

2. Create a DIV component for the circular range slider.

<div id="demo"></div>

3. Call the plugin on the DIV component to generate a default range slider with full circle shape.

$("#demo").roundSlider({
  // options here
});

4. The plugin comes with loads of choices that can assist you to customise the range slider.

// min / max value
min: 0,
max: 100,

// custom step
step: 1,

// initial value
value: null,

// customize the slider
radius: 85,
width: 18,
// the below props are relative to "width" when you provide the value starts with "+" or "-"
// otherwise if you provide any number then it will take the exact value
pathWidth: "+0",
handleSize: "+0",

startAngle: 0,
endAngle: "+360",

// enable animation
animation: true,

// enable tooltip
showTooltip: true,
editableTooltip: true,

// read-only mode
readOnly: false,

// disabled mode
disabled: false,

// allow for keyboard interaction
keyboardAction: true,

// enable mousel scroll action
mouseScrollAction: false,

// square, or round
lineCap: "butt",

// default, min-range or range
sliderType: "default",

// full, quarter-top-left, quarter-top-right, quarter-bottom-right, 
// quarter-bottom-left, half-top, half-bottom, half-left, half-right, 
// pie, custom-half, custom-quarter
circleShape: "full",

// round, dot, or square
handleShape: "round",

// the 'startValue' property decides at which point the slider should start.
// otherwise, by default the slider starts with min value. this is mainly used
// for min-range slider, where you can customize the min-range start position.
startValue: null,

allowInvertedRange: false,
handleRotation: false,
snapToStep: true,

// SVG related properties
svgMode: true,
borderWidth: 1,
borderVisibility: "both",
borderColor: "#AAA",
pathColor: "#FFF",
rangeColor: "#54BBE0",
handleColor: null,
tooltipColor: null,

// events
beforeCreate: null,
create: null,
start: null,
beforeValueChange: null,
drag: null,
change: null,
update: null,
valueChange: null,
stop: null,
tooltipFormat: null

jQuery Circular Range Slider Plugin, roundSlider Github, circle range slider

See Demo And Download