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
Time Slider
An extension of the standard slider, customised for time selection.
Examples

HTML

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

JavaScript

slider = new hx.TimeSlider('#slider')

HTML

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

JavaScript

slider = new hx.TimeSlider('#slider2', {type: 'range'})
Api
Change Log
Prototypes
hx.TimeSliderextendsEventEmitter
A widget type for selecting a value from a range of dates, or a date range from a range of date.
Constructors
hx.TimeSliderselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
The element used to create the slider
options
The options to use when creating the slider
Properties
disabledBoolean
Whether the time slider should be disabled
Default: false
maxDate
The maximum value of the slider.
minDate
The minimum value of the slider.
renderersliderSliderelemHTMLElementvalueNumberdateDateString
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(slider.formatter(new Date(value)));
}
See the formatter method for information on the slider.formatter.
Arguments
sliderSlider
The current slider object.
elemHTMLElement
The node of the slider value.
valueNumber
The current value of the selected slider control.
dateDate
The currently selected date value of the slider.
Returns
String
A string in the desired output format.
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'
Properties
endNumber
The end date set for this time slider (in milliseconds). This value should only be read, and not set. Use setRange to change the start and end properties.
startNumber
The start date set for this time slider (in milliseconds). This value should only be read, and not set. Use setRange to change the start and end properties.
Events
change
Emitted when the slider value is changed.
slideend
Emitted when the slider finishes moving.
slidestart
Emitted when the slider finishes moving.
Methods
disabledvalueBooleanTimeSlider
A method for disabling or enabling a time slider
Arguments
valueBoolean
Whether the time slider should be disabled
Returns
TimeSlider
This time slider
disabledBoolean
A method for getting the disabled state of a time slider
Returns
Boolean
Whether the time slider is disabled
formatterdateDateString
This function can be used in the render function to format a date object for display on the time slider. In most cases, it should be used with the valueToDate method. 
var render = function(slider, elem, value, update, rangeStart){
  hx.select(elem).text(slider.formatter(slider.valueToDate(value)))
}
By default, this function will use moment.js (if available) with the 'HH:mm' format or will convert the date to 24 hour 'HH:mm' if moment.js is not available.
Arguments
dateDate
The date to format.
Returns
String
A formatted string.
maxmaxDateTimeSlider
Sets the maximum date of the slider.
Arguments
maxDate
The maximum date to set
Returns
TimeSlider
This TimeSlider
maxDate
Gets the maximum date of the slider.
Returns
Date
The maximum date of the slider.
minminDateTimeSlider
Sets the minimum date of the slider.
Arguments
minDate
The minimum date to set
Returns
TimeSlider
This TimeSlider
minDate
Gets the minimum date of the slider.
Returns
Date
The minimum date of the slider.
rendererrenderFunctionTimeSlider
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(slider.formatter(new Date(value)));
}
Arguments
sliderSlider
The current slider object.
elemHTMLElement
The node of the slider value.
valueNumber
The current value of the selected slider control.
Returns
TimeSlider
This TimeSlider
rendererFunction
Gets the current renderer function
Returns
functionsliderSliderelemHTMLElementvalueNumber
The render function used to display the value of the slider.
The default render function is: 
function (slider, elem, value) {
  hx.select(elem).text(slider.formatter(slider.valueToDate(value)));
}
Arguments
sliderSlider
The current slider object.
elemHTMLElement
The node of the slider value.
valueNumber
The current value of the selected slider control.
stepstepNumberTimeSlider
Sets the step size of the slider in milliseconds.
Arguments
stepNumber
The step size of the slider.
Returns
TimeSlider
This TimeSlider
stepNumber
Gets the step size of the slider in milliseconds.
Returns
Number
The step size of the slider.
valuevalueNumberTimeSlider
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 specified in milliseconds.
Returns
TimeSlider
valuevalueDateTimeSlider
Sets the value / position of the slider. Returns this slider for chaining.
Arguments
valueDate
A date between the minimum and maximum values for the slider.
Returns
TimeSlider
valuevalueObjectTimeSlider
Sets the values for a range slider.
Arguments
value
Properties
endNumber / Date
A value between the minimum and maximum values for the slider.
startNumber / Date
A value between the minimum and maximum values for the slider.
Returns
TimeSlider
valueDate / Object
Returns the current value of the slider.
Returns
Date / Object
For standard sliders, this will be a number. For range sliders, this will be an object with the below properties
Functions
hx.timeSlideroptionsObjectSelection
Creates a new TimeSlider set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing TimeSlider
Returns
Selection
A selection containing an element with an TimeSlider initialised on it