HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
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
Change Log
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.
maxNumber
The maximum value of the slider. For discrete sliders, it can be set to one of the discrete values.
Default: 1
minNumber
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
disabledvalueBooleanSlider
A method for disabling or enabling a slider
Arguments
valueBoolean
Whether the slider should be disabled
Returns
Slider
This slider
disabledBoolean
A method for getting the disabled state of a slider
Returns
Boolean
Whether the slider is disabled
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
Array
The array of discrete values (if set - it will be undefined if not set)
maxmaxNumberSlider
Sets the maximum value of the slider.
Arguments
maxNumber
The maximum value to set
Returns
Slider
This Slider
maxNumber
Gets the maximum value of the slider.
Returns
Number
The maximum value of the slider.
minminNumberSlider
Sets the minimum value of the slider.
Arguments
minNumber
The minimum value to set
Returns
Slider
This Slider
minNumber
Gets the minimum value of the slider.
Returns
Number
The minimum value of the 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
Number
The step size of the slider.
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
valuevalueObjectSlider
Sets the values for a range slider.
Arguments
value
Properties
endNumber
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
Number / Object
For standard sliders, this will be a number. For range sliders, this will be an object with the below properties
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