Slider

Wiki ▸ API Reference ▸ Slider

A Slider is a possibly interactive component where a silding cursor marks the current value.

# iopctrl.slider()

Constructs a new slider.

# slider(selection)

Apply the slider to a selection or transition. The selection must contain an SVG or G element. For example:

d3.select("body").append("svg")
    .attr("class", "slider")
    .attr("width", 400)
    .attr("height", 100)
  .append("g")
    .call(slider);

# slider.value([value])

If value is specified, sets the value and returns the slider. If value is not specified, returns the current value.

# slider.scale([scale])

If scale is specified, sets the scale used and returns the slider. The range of the scale measures the pixel size of the slider and the domain defines the value scale. Any quantitative linear, logarithmic or power scale can be used. If an ordinal scale is used, it must define rangeBands. In that case the slider will only stop at discreet locations defined by the center of the range bands. If scale is not specified, returns the current scale.

# slider.axis([axis])

If axis is specified, sets the axis used and returns the slider. The orientation of the axis also defines the orientation of the slider. If axis is not specified, returns the current axis.

# slider.bands([bands])

If bands is specified, adds coloured bands to the slider for the ranges specified and returns the slider. The bands array must be of the form:

slider.bands([
    {"domain": [90, 100], "span":[0.05, 0.12] , "class": "fault"},
    {"domain": [75, 90], "span": [0.05, 0.12] , "class": "warning"},
    {"domain": [0, 75], "span": [0.05, 0.12] , "class": "ok"}
]);

where the domain specifies the domain range, the span the thickness and the class is the css class of the band If bands is not specified, returns the current bands array.

# slider.width([width])

If width is specified, sets total width of the slider and returns the slider. If width is not specified, returns the current width.

# slider.transitionDuration([transitionDuration])

If transitionDuration is specified, sets transition duration of the slider movements and returns the slider. If transitionDuration is not specified, returns the current transitionDuration.

# slider.ease([ease])

If ease is specified, sets the easing function used for slider movements and returns the slider. If ease is not specified, returns the current easing function.

# slider.moveToTouch([moveToTouch])

If moveToTouch is specified, sets the touch state and returns the slider. If moveToTouch is set to true, the cursor will move to the touched point. If ease is not specified, returns the current moveToTouch state.

# slider.indicator([indicator])

If indicator is specified, sets the indicator function used to draw the indicator and returns the slider. The function is called with two arguments; the selection on which to draw and the width of the slider. Example:

slider.indicator(function(g, width) {
    g.append("line")
            .attr("y1", -width/2)
            .attr("y2", width/4)
            .style("stroke", "red")
            .style("stroke-width", 2);
            
    });

If indicator is not specified, returns the current indicator function.

# slider.events([events])

If events is specified, enables or disables the events and returns the slider. If ease is not specified, returns the current event state.

# slider.onValueChanged([listener])

If listener is specified, sets the value changed listener and returns the slider. The listener is called with a single argument indicating the new value. If listener is not specified, returns the current listener.