Reputation: 41
I have a round slider which i have made with the help of some websites. Now I try to read the current value of slider and store value in database. But i am struggling to get the slider value. By default, the slider shows the value. But could not use it. I need to store this value in variable and use it further. Can someone help?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery roundSlider - JS Bin</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css">
<script src="//cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
</head>
<body>
<h2>roundSlider</h2>
<div id="slider"></div>
<div id="range"></div>
</body>
</html>
$("#slider").roundSlider(
{
value:0,
min: 0,
max: 100,
step: 1,
sliderType: "min-range",
slide: function(event, ui) {
alert(ui.value);
}
}
);
Upvotes: 0
Views: 3046
Reputation: 1224
append this event handler ...
$("#slider").roundSlider({
change: function (e) {
console.log(e.value);
}
});
when you only reads the value on submit etc. you can read it directly, in other cases it is possible to read the value while change isn´t finished
Upvotes: 0
Reputation: 1539
if the value has changed, You can determine by a change event
change( event, ui )
You have to write change event like this
$("#slider").roundSlider(
{
value:0,
min: 0,
max: 100,
width: 30,
step: 1,
sliderType: "min-range",
change: function (args) {
console.log(args.value);
$('#range').html(args.value)
}
}
);
See demo here
Upvotes: 4
Reputation: 2426
Can use the drag
event and outside by using $("#slider").roundSlider("option", "value")
Fiddle
JS:
$("#slider").roundSlider(
{
value:0,
min: 0,
max: 100,
step: 1,
sliderType: "min-range",
drag: function (event, ui) {
console.log(this.getValue());
},
slide: function(event, ui) {
alert(ui.value);
}
}
);
Upvotes: 0