d3.select("#link-strength-slider")
    .call(d3.slider()
        .min(0)
        .max(1)
        .step(0.05)
        .value(Session.get("linkStrength"))
        .on("slide", function(evt, value) {
            Session.set("linkStrength", value);
            // force.stop();
            force = force.linkStrength(value);
            force.start();
        }));

later on I want to do something like

$("#link-strength-slider").val(10)

any ideas?

Has anyone successfully loaded this module with require()? I'm assuming a shim is needed, but I can't figure out what it should look like. Right now I have:

require.config({ paths: { "d3": "https://d3js.org/d3.v3.min", "d3.slider": "lib/d3.slider" }, shim: { "d3.slider": { "deps": ["d3"], "exports": "d3" } } }); console.log(d3.version); d3.select("#time_slider").call(d3.slider());

This logs:
3.5.17
TypeError: d3.slider is not a function

I have found an issue in the value function when trying to reset the slider handle from 0.

If the handle has been pulled down to the bottom and so the value is 0, when calling slider.value(100), the value function checks the old value (0) which evaluates to false and so the moveHandle function is never called.

Using the slider vertically you have the min-Value at the bottom and the max-Value at the top, however using an axis, even a custom one, results in the lowest tickValue at the top and highest tick-Value at the bottom, thus not corresponding to the data.

For my individual project I could fix this with changing to

axisScale = scale.copy().range([sliderLength, 0]);

but maybe this can be solved more universally to make that great slider even more awesome.

it looks like when you try to set handles of a range slider programatically you can't use an array for the value, as would be expected when you set up the thing e.g.

rangeSlider.value([25, 75])

however you can move one slider handle by

rangeSlider.value(25)

but that defeats the purpose of a range slider, as the other handle can't be controlled at all.

This slider is such a valueable addition to the d3js toolkit that I hope it will find some skilled developers to contribute

Hi,

I used following code in my project for slider.

essai = d3.slider().scale(d3.scale.ordinal().domain(["2001", "2002", "Winter-2003", "2004-2005"]).rangePoints([0, 1], 0.5)).axis(d3.svg.axis()).snap(true).value("2001"); d3.select('#slider12').call(essai); It is not working and not able to get any values on events.

Please suggest

The div of the slider changes if I change the window width. But the labels of the axis stay at the same locations, making them incorrect.

At the moment I specify a slider for use on a filter operation, relating to properties in an array I store

mboslider = d3.slider().min(minscore[14]).max(maxscore[14]).axis(true) .on("slide", function(evt, value) { filtscore[8] = value; filter(); });
When these values are updated, I call mboslider.min or max as appropriate, which updates the values within the slider object, but doesn't manifest in any changes of scale. Manually changing the scale using the in built setter d3.scale.linear().domain([minscore[14], maxscore[14]) doesn't appear to work, as no scale appears at all in this circumstance.

I am making multiple range sliders dynamically depending on what data I am pulling in. I have gotten the sliders to slide just fine but when trying to edit the span text I don't know which slider is being clicked so I can't edit the right span.
I am also creating the divs and spans dynamically.

Is there a way to get the ID of the div that contains the range slider that is being clicked? I could then compared which one and be able to select the right span to edit.

How to get the value for slider with min, max and step values ?

d3.select('#slider7').call(d3.slider().axis(true).min(0).max(1024).step(100));

Hi,

I see that every time you create a new slider, the slider handle always have an id of "handle-one". When one wants to change or add text to the handle(say show the current value of the handle), would it be better to differentiate the "id"s?

Hi,

Any chance this will be updated to work with D3 v4?
Certain things it needs to work like rebind and a few others have been deprecated or their functions have had their name changed.

Using the Range Slider, which is invoked by using a two number array as a value

d3.slider().value([50, 70])

the console throws an

ReferenceError: Can't find variable: divRange

This can be fixed by declaring

var divRange;

as a private variable (moving from line 71 to 49)

I found that when I inserted a slider, my dropdowns failed to expand. Below is reproducible HTML:

<link rel="stylesheet" href="d3.slider.css" />
<div class="testSlider"></div>
<hr>
<select>test
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.slider.js"></script>
<script>
var slider = d3.select(".testSlider")
    .call(d3.slider()
            .axis(true)
            .value([0, 100])
            .on("slide", function(evt, value) {
                console.log(value[0]);
                    }));

</script>

When clicking on the slider, the slider moves to the new position but does not dispatch a "slideend" event.

Currently I can create a slider like this

var slider = d3.slider().min(0).max(10);
d3.select("#slider").call(slider)

This creates a slider. Is there a way to update the position of the slider via javascript. For example, executing slider.value(5) should update the position of the slider.

Hi, I am trying the latest version from the master branch. After opening index.html from browser, there is an exception "containerSize() not defined" whenever I drag the slider.

It seems that this bug was introduced in the commit f4b5c68
where sliderLength is changed to containerSize() but the function containerSize is not defined.

Can this work with different d3 axis scales, e.g. a log-scaled axis?

Let's say I have a horizontal slider, and when I move my slide handle, how to make the "unselected" portion to grey out ??

For example --> http://www.land-of-web.com/wp-content/uploads/2012/02/1318.jpg

Thanks for any advice.

I have found a semantic issue when I try and place two range sliders on the same page. In short some elements reuse what is supposed to be a unique id.

Looking at the demo page

http://benheb.github.io/d3.slider/

the range slider created by

d3.slider().value([10, 25 ])

here is an edited outline of the HTML

When there are two sliders on the page there will be 2 elements with unique id "handle-one" and two elements with id "handle-two"

The solution is to change the id attributes into class attributes - and then tighten up the select of element in the code where appropriate.

I really like this project and will try and find the time to work on the solution soon...but thought I should outline the issue.

Custom axis on top is is shown way below the slider rail on FIrefox.
Tested on Firefox version 24 with the demo page.

In horizontal orientation, when specifying margin(0), the axis is not visible.

Workaround is to remove the height assignment in line 104 (https://github.com/turban/d3.slider/blob/master/d3.slider.js#L104):

svg.attr({
    width: sliderLength + margin * 2
    //height: margin
});

Two problems when resizing the window (Bootstrap used in this example)

http://www1.journaldemontreal.com/2014/04/inondations/

1. Does not resize correctly when window resizes (axis and slider are off)
2. Even though specified step(1), it divides the steps into 1.5, 2, 2.5 etc. if window big enough

Am I using it wrong or are these just limitations of the current release 1.32 release?

The slider does not support ordinal scales, wouldn't be great to support that?