How to get the slider value?

[VinSpee]

how for to get value

[kevinohara80]

+100000000000000000000

[sujeetsr]

The slider value can be obtained by slider.value()
Thanks for this issue! This is missing in the documentation, I'll add it there..

[sujeetsr]

I'm also editing the title.
If this didn't answer your question, please let me know.

[kevinohara80]

How do I get a slide event? Or, better yet, how do I get an event when the user releases the slider after dragging?

[sujeetsr]

You can add a callback function to be called when the slider moves. Sorry, not gotten to the docs yet.
Here is how to do it, if you want to update a text box value to the slider value for example.

// Callback function (a function that will be called with the slider obj as argument, when the slider
// changes)
var myFn = function(slider) {
var value = slider.value();
$('#myinput').val(value);
}

// Set slider callback function
slider.callback(myFn)

[kevinohara80]

What I really need is a callback when the drag completes. The scenario would be when the user slides and releases the slider, I need to get the value and save to the server. Listening to mouseup kind of works but isn't reliable because it depends on where in the dom the user actually releases their mouse or finger.

[sujeetsr]

Yes, the callback function is called by the slider when the drag completes, not while its moving, sorry if that wasn't clear.

[kevinohara80]

The callback function is called continuously during the drag, not when it's complete. The log below shows one drag without releasing the mouse.

this.slider = d3.slider()
      .min(min)
      .max(max)
      .showRange(true)
      .value(this.props.metric.goal)
      .tickFormat(tickFormatter)
      .tickValues(tv)
      .stepValues(_.range(min, max+1))
      .callback(function(evt) {
        logger.debug('callback: ' + self.slider.value());
      });

Console:

[DEBUG][View:MetricScoresItem] callback: 2 
[DEBUG][View:MetricScoresItem] callback: 1
[DEBUG][View:MetricScoresItem] callback: 2 
[DEBUG][View:MetricScoresItem] callback: 3 
[DEBUG][View:MetricScoresItem] callback: 4 
[DEBUG][View:MetricScoresItem] callback: 5 
[DEBUG][View:MetricScoresItem] callback: 6 
[DEBUG][View:MetricScoresItem] callback: 7 
[DEBUG][View:MetricScoresItem] callback: 8 
[DEBUG][View:MetricScoresItem] callback: 9 
[DEBUG][View:MetricScoresItem] callback: 10 
[DEBUG][View:MetricScoresItem] callback: 9 
[DEBUG][View:MetricScoresItem] callback: 8 
[DEBUG][View:MetricScoresItem] callback: 7 
[DEBUG][View:MetricScoresItem] callback: 6 
[DEBUG][View:MetricScoresItem] callback: 5
[DEBUG][View:MetricScoresItem] callback: 4 

[sujeetsr]

ahh! I forgot the d3 'drag' event was called during dragging, and not at the end. thanks!
I suppose it would be possible to add a callback to be called for the 'dragend' event. Not sure when I can get to this though. Would you like to try making the change and opening a pull request?

[EnergyTeam]

There is a problem, when i set a value after slider is init and draw, the slider can't redraw... How to do this?

[pkdism]

@sujeetsr Did you add callback for the 'dragend' event? I am trying to get value of the slider at any time.