nawas
nawas

Reputation: 41

How can i read the value of round slider using jQuery?

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

Answers (3)

Frank Wisniewski
Frank Wisniewski

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

Nidhi
Nidhi

Reputation: 1539

if the value has changed, You can determine by a change event

change( event, ui )
  1. event (event object is guaranteed to be passed to the event handler)
  2. ui : handle(representing the handle that was changed) , handleIndex(numeric index of the handle that was moved),value(current value of the slider.)

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

RonyLoud
RonyLoud

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

Related Questions