0

I created a slider using Dragdealer and I'm having a problem reading the slider's value.

Here is my HTML:

<div id="just-a-slider" class="dragdealer">
    <div class="handle red-bar">
        <span class="value"></span>%
    </div>
</div>

and Javascript to enable the slider:

new Dragdealer('just-a-slider', {
  animationCallback: function(x, y) {
    $('#just-a-slider .value').text(Math.round(x * 100));
  }
});

How to read the value the user has selected?

For example I want to do something like that:

var sliderValue = document.getElementById("just-a-slider").value;

// When the user clicks the Apply button an empty div gets the slider's value that the user selected
var greetingString = sliderValue;
document.getElementById("users_choice").innerText = greetingString;
1
  • Go read read what's on skidding.github.io/dragdealer first. It's pretty difficult to be clearer than that. Unless you're really new to javascript or programming.
    – Ivarpoiss
    Mar 14, 2014 at 7:12

3 Answers 3

1

Here is the Fiddle

HTML

<div id="just-a-slider" class="dragdealer">
    <div class="handle red-bar">
        <span class="value"></span>%
    </div>
</div>
<input type="button" value="Get slider value" id="button1" />

jQuery

new Dragdealer('just-a-slider', {
  animationCallback: function(x, y) {
    $('#just-a-slider .value').text(Math.round(x * 100));
  }
});

$('#button1').click(function(){
    alert($('#just-a-slider .value').text());
});

Live demo here

2
  • $('#just-a-slider .value').text(); did the job.
    – kalpetros
    Mar 14, 2014 at 7:29
  • If this solves your problem than you may mark it as an answer :)
    – IT ppl
    Mar 14, 2014 at 7:30
1

Try this

$('#users_choice').text() = $('#just-a-slider .value').text();
0

From the documentation at http://skidding.github.io/dragdealer/ it seems you can simply do

var sliderValue = $('#just-a-slider').getValue();

getValue - Get the value of a Dragdealer instance programatically. The value is returned as an [x, y] tuple and is the equivalent of the projected value returned by the regular callback, not animationCallback.

1
  • I tried it and I got the following error: Object doesn't support property or method 'getValue'
    – kalpetros
    Mar 14, 2014 at 7:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.