A slider for a value inside a range, and a range slider for two (a from and a to). Both are native
<input type="range">, so the keyboard (arrows, Home, End, Page keys) and assistive technology work as the
browser does them; the look is the canvas's. The value is shown beside the track and is the LiveView's, sent
by the form's phx-change. Values, limits and step are numbers: integers or floats.
The range slider is two inputs on one track: the low one can never go above the high one and the other way
round. The DevactionUI.RangePair hook enforces it in the browser while a thumb is dragged, painting the
filled part and the value as it goes, and range/3 enforces it on the server too. Give format_text (such as
"R$ %{value}k") instead of format and the value beside the label also follows the thumb between round
trips; a format function can only run on the server.
bubble puts the value in a small dark label over the thumb (beside it when vertical) that shows on hover,
focus and while dragging and follows the thumb. It is aria-hidden: assistive technology already reads the
value (or value_text) from the input. With format_text the bubble keeps the format between round trips.
orientation={:vertical} stands the track up, with the value on top and the label below, and aria-orientation
says so; the keys are the browser's (Up and Right raise the value, Down and Left lower it). Its height is
length_class (default h-40). Marks (ticks) are for the horizontal slider only.
Summary
Functions
The index of the mark nearest to a position of 0 to 100 on the track.
Where value sits between min and max, from 0 to 1.
Where value sits between min and max, from 0 to 100.
A pair {low, high} put in order and inside min and max.
Functions
@spec active_tick(number(), pos_integer()) :: non_neg_integer()
The index of the mark nearest to a position of 0 to 100 on the track.
Where value sits between min and max, from 0 to 1.
Where value sits between min and max, from 0 to 100.
A pair {low, high} put in order and inside min and max.
Attributes
id(:string) (required)name_low(:string) (required)name_high(:string) (required)low(:any) (required) - a number.high(:any) (required) - a number.label(:string) - what the range is for, written above the track. Defaults tonil.label_low(:string) (required) - names the low thumb for assistive technology.label_high(:string) (required) - names the high thumb for assistive technology.min(:any) - Defaults to0.max(:any) - Defaults to100.step(:any) - Defaults to1.format(:any) - Defaults tonil.format_text(:string) - as inslider/1, for each of the two values. Defaults tonil.bubble(:boolean) - a value label over each thumb, as inslider/1. Defaults tofalse.orientation(:atom) - Defaults to:horizontal. Must be one of:horizontal, or:vertical.length_class(:string) - the height of a vertical track, as a class. Defaults to"h-40".class(:any) - Defaults tonil.- Global attributes are accepted.
Attributes
id(:string) (required)name(:string) (required)value(:any) (required) - a number.label(:string) (required)min(:any) - Defaults to0.max(:any) - Defaults to100.step(:any) - Defaults to1.format(:any) - number to text, for the value beside the label. Defaults tonil.format_text(:string) - the same as a text with%{value}; the browser fills it while the thumb moves. Defaults tonil.value_text(:string) - what assistive technology reads in place of the number, such as "Detailed". Defaults tonil.ticks(:list) - names under the track in equal columns, first at the minimum and last at the maximum; the one the value is nearest to is stressed. Defaults to[].bubble(:boolean) - the value in a small label over the thumb, while it is hovered, focused or dragged. Defaults tofalse.orientation(:atom) - Defaults to:horizontal. Must be one of:horizontal, or:vertical.length_class(:string) - the height of a vertical track, as a class. Defaults to"h-40".disabled(:boolean) - Defaults tofalse.class(:any) - Defaults tonil.- Global attributes are accepted.