Slider

live example

Explore the API in the live example.

api reference

Slider(name[, parent])

The slider control widget. Inherits all API from the [Widget] ../components/widget.html component. The slider is constrained to a rectangle defined by the width/height and the margins. It is vertically centered. The scale ticks are implemented using BottomAxis , making all the API for that component available for the slider.

Parameters

Name	Type	Description
name	string	Name of the widget. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

Slider.callback([callback])

Binds a callback to the slider. Note that this is called every time the handle is dragged (you may want to debounce it).

Parameters

Name	Type	Description
callback	Function	optionalCallback to bind when the handle is dragged. The current value is passed as parameter. Default value is `null`.

Returns

Slider

Reference to the Slider API.

Examples

// Print current value to console.
const slider = dalian.Slider('my-control')
  .callback(console.log)
  .render()

// Remove callback.
slider.callback()
  .render()

Slider.color([color])

Sets the color of the active handle and value track of the slider.

Parameters

Name	Type	Description
color	string	optionalColor to set. Default value is `grey`.

Returns

Slider

Reference to the Slider API.

Examples

// Set slider color.
const slider = dalian.Slider('my-control')
  .color('royalblue')
  .render()

// Reset color to default.
slider.color()
  .render()

Slider.max([value])

Sets the maximum of the slider.

Parameters

Name	Type	Description
value	number	optionalMaximum value to set. Default value is `1`.

Returns

Slider

Reference to the Slider API.

Examples

// Set the maximum value.
const slider = dalian.Slider('my-control')
  .max(2)
  .render()

// Reset max to 1.
slider.max()
  .render()

Slider.min([value])

Sets the minimum value of the slider.

Parameters

Name	Type	Description
value	number	optionalMinimum value to set. Default value is `0`.

Returns

Slider

Reference to the Slider API.

Examples

// Set the minimum value.
const slider = dalian.Slider('my-control')
  .min(-3)
  .render()

// Reset min to 0.
slider.min()
  .render()

Slider.step([value])

Sets the step size for the slider. If it is set to 0, the slider can take continuous values.

Parameters

Name	Type	Description
value	number	optionalStep size to set. Only the absolute value of the provided number is considered. Default value is `0`.

Returns

Slider

Reference to the Slider API.

Examples

// Set step size to 0.1.
const slider = dalian.Slider('my-control')
  .step(0.1)
  .render()

// Reset step size to 0.
slider.step()
  .render()

Slider.thickness([thickness])

Sets the slider thickness in pixels.

Parameters

Name	Type	Description
thickness	number	optionalThickness to set. Default value is `8`.

Returns

Slider

Reference to the Slider API.

Examples

// Set thickness to 10px.
const slider = dalian.Slider('my-control')
  .thickness(10)
  .render()

// Reset thickness to default.
slider.thickness()
  .render()

Slider.trackColor([color])

Sets the slider's track color.

Parameters

Name	Type	Description
color	string	optionalColor to set. Default value is `#ddd`.

Returns

Slider

Reference to the Slider API.

Examples

// Set track color to white.
const slider = dalian.Slider('my-control')
  .trackColor('#fff')
  .render()

// Reset track color.
slider.trackColor()
  .render()

Slider.value([value])

Sets the slider's value. Note that this method does not invoke the callback, merely positions the handle.

Parameters

Name	Type	Description
value	number	optionalValue to set handle to. If it is not specified, no change is taking place. Default value is `0`.

Returns

Slider

Reference to the Slider API.

Examples

// Set value to 0.7.
const slider = dalian.Slider('my-control')
  .value(0.7)
  .render()