I am using https://github.com/princejwesley/circular-slider in my project which is based on Ionic Framework(Cordova) and angularJS.
My target is to have an circular slider with 3 steps: Low,Medium, High. So when 0 is selected it should show Low, for 1 'Medium' and 2 should be high. I am unable to call setValue function in slide. so that everytime user slides corresponding value is to be displayed.
var intensity = $('#intensity').CircularSlider({
//I used ui.find() method but its not working
shape: "Half Circle",
min: 0,
max: 2,
value: 0,
touch: true,
setValue: function(value) {
console.log('inside set');
value = value * 10;
return value;
},
slide: function(ui, value) {
console.log('inside slide');
console.log(value + "ui" + ui);
ui.find('.jcs-value ').setValue(0); //I used this method to set value on ui
},
});
I tried ui.find('.jcs-value').setValue
, ui.setValue
or intensity.setValue
in the slide function but it is not working as expected.
Please help.
Regards, Ajay
I think you can achieve your requirement by using jQuery roundSlider plugin, since this is very flexible and easy to customize.
For more details about the roundSlider, check the demos and documentation page.
Please check the sample demo for your requirement jsFiddle
.
Screenshot of the output: