HexagonJS
Edit Page
Slider
A slider component for picking a number from a range.
Examples

HTML

<div id="slider" class="hx-slider"></div>

JavaScript

var slider = new hx.Slider('#slider');

HTML

<div id="slider2" class="hx-slider"></div>

JavaScript

var slider = new hx.Slider('#slider2', {type: 'range'});
Api
Prototypes
hx.SliderextendsEventEmitter
A widget type for selecting a value from a range, or a range of values from a range.
Constructors
hx.SliderselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
The element used to create the slider
options
The options to use when creating the slider
Properties
disabledBoolean
Whether the slider should be disabled
Default: false
discreteValuesArray
An array of values to use on the slider. They will display in the order provided and will be spaced evenly along the slider.
The maximum value of the slider. For discrete sliders, it can be set to one of the discrete values.
Default: 1
The minimum value of the slider. For discrete sliders, it can be set to one of the discrete values.
Default: 0
renderersliderSliderelemHTMLElementvalueNumber
The render function to use when rendering the value of the slider.
The default render function is:
function (slider, elem, value) {
  hx.select(elem).text(hx.format.fixed(2)(value));
}
Arguments
sliderSlider
The current slider object.
elemHTMLElement
The node of the slider value.
valueNumber
The current value of the selected slider control.
stepNumber
The step to use when building the slider. The slider will display with points at intervals at the step value, starting from the minimum value. The maximum step will always be less than or equal to the maximum value of the slider.
typeString
The type of the slider. Can be 'range' or 'slider'
Default: 'slider'
Events
change
Emitted when the slider value is changed.
slideend
Emitted when the slider finishes moving.
slidestart
Emitted when the slider finishes moving.
Methods
disabledBoolean
A method for getting the disabled state of a slider
Returns
Whether the slider is disabled
disabledvalueBooleanSlider
A method for disabling or enabling a slider
Arguments
valueBoolean
Whether the slider should be disabled
Returns
Slider
This slider
discreteValuesarrayArrayrenderBooleanSlider
Makes the slider a discrete value, using the values provided
Arguments
arrayArray
The array of discrete values to use
renderBoolean
Whether to update the slider
Default: true
Returns
Slider
This Slider
discreteValuesArray
Gets the descrete values set for this slider
Returns
The array of discrete values (if set - it will be undefined if not set)
maxmaxNumberSlider
Sets the maximum value of the slider.
Arguments
The maximum value to set
Returns
Slider
This Slider
Gets the maximum value of the slider.
Returns
The maximum value of the slider.
Gets the minimum value of the slider.
Returns
The minimum value of the slider.
minminNumberSlider
Sets the minimum value of the slider.
Arguments
The minimum value to set
Returns
Slider
This Slider
rendererrenderFunctionSlider
Sets the renderer function
Arguments
rendersliderSliderelemHTMLElementvalueNumber
The render function used to display the value of the slider.
The default render function is:
function (slider, elem, value) {
  hx.select(elem).text(hx.format.fixed(2)(value));
}
Arguments
sliderSlider
The current slider object.
elemHTMLElement
The node of the slider value.
valueNumber
The current value of the selected slider control.
Returns
Slider
This Slider
rendererFunction
Gets the current renderer function
Returns
functionsliderSliderelemHTMLElementvalueNumber
The render function used to display the value of the slider.
Arguments
sliderSlider
The current slider object.
elemHTMLElement
The node of the slider value.
valueNumber
The current value of the selected slider control.
stepstepNumberSlider
Sets the step size of the slider.
Arguments
stepNumber
The step size of the slider.
Returns
Slider
This Slider
stepNumber
Gets the step size of the slider.
Returns
The step size of the slider.
valuevalueObjectSlider
Sets the values for a range slider.
Arguments
value
Properties
The end value of the selected range slider
startNumber
The start value of the selected range slider
Returns
Slider
valueNumber / Object
Returns the current value of the slider.
Returns
For standard sliders, this will be a number. For range sliders, this will be an object with the below properties
valuevalueNumberSlider
Sets the value / position of the slider. Returns this slider for chaining.
Arguments
valueNumber
A value between the minimum and maximum values for the slider. For discrete sliders, the value can be discrete.
Returns
Slider
Functions
hx.slideroptionsObjectSelection
Creates a new Slider set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing Slider
Returns
Selection
A selection containing an element with an Slider initialised on it