Built by Stephen Band for
Cruncher.
Documentation set in Euclid
and Martian Mono. Fonts
used for documentation not included as part of the license covering the
use of range-input.
A horizontal slide input with scaling, steps, ticks, support for various units and formatted output display.
Import and register the <range-input> custom element, upgrading any
instances already in the DOM:
import RangeInput from 'literal/documentation/templates/range-input.js';You can now write <range-input> elements in your HTML:
<range-input name="ratio" min="-1" max="1" ticks="-1 -0.8 -0.6 -0.4 -0.2 0 0.2 0.4 0.6 0.8 1" value="0">Scale</range-input>
<range-input name="gain" min="-48dB" max="0dB" ticks="-∞dB -48dB -42dB -36dB -30dB -24dB -18dB -12dB -6dB 0dB" scale="log-60dB" display="dB" value="-6dB">Volume</range-input>
<range-input name="frequency" min="20" max="20000" ticks="20Hz 50Hz 100Hz 200Hz 500Hz 1kHz 2kHz 5kHz 10kHz 20kHz" scale="log" display="Hz" value="20Hz">Frequency</range-input>
<range-input name="rating" min="1" max="5" ticks="1 2 3 4 5" step="tick" scale="linear" value="3">Rating</range-input>min ="0"
Value at lower limit of fader. Will interpret string values with recognised
units, eg. "0dB" or "200Hz", or numbers.
max ="1"
Value at upper limit of fader. Will interpret string values with recognised
units, eg. "0dB" or "200Hz", or numbers.
scale ="linear"
Fader scale. This is the name of a transform to be applied over the range of the fader travel. Possible values are:
"linear""quadratic""cubic""log""log-24dB""log-48dB""log-60dB""log-72dB""log-96dB"ticks
A space or comma separated list of values at which to display tick marks. Values may be listed with or without units, eg:
ticks="0 0.2 0.4 0.6 0.8 1"
ticks="-∞dB -48dB -36dB -24dB -12dB 0dB"Note that the unicode ∞ infinity character is interpreted as Infinity
(after unit conversion -∞dB is 0 and 0dB is 1).
Ticks may optionally be given labels, displayed in lieu of the tick value. Labels are written in square brackets following the tick value:
ticks="0 [None] 0.5 [Half] 1 [Full]"display
The units to display the value in. The output value and all ticks are displayed in this unit. Possible values are:
"dB" – 0-1 is displayed as -∞dB to 0dB"Hz" - frequency in Hz and kHz"bpm" - displays rates in Hz as bpm"s" - time in ms and s"semitone" - without units"hh:mm" – and other time formats including any of the tokens YMwdhmsDisplay formatters may be added by importing the formatters object:
RangeInput.displayFormats['my-format'] = (format, value) => {
// Return an object of the form `{ value, unit }`
};This format may now be used by declaring the display attribute:
display="my-format"step
Step is either:
"any" (the default value)"ticks". The values in the ticks attribute are used as step values.type
“number”
A readonly property with the value "number" (provided for consistency
with native form elements, which all have a type).
.min
Value at lower limit of fader. Will interpret string values with recognised
units, eg. "0dB" or "200Hz", or numbers.
.max
Value at upper limit of fader. Will interpret string values with recognised
units, eg. "0dB" or "200Hz", or numbers.
::part(label)
Style the label.
::part(tick)
Style the tick marks.
::part(output)
Style the display of the output value.
Support development: Sponsor
github.com/stephband/form-elementsgithub.com/stephband/form-elements/issues
Built by Stephen Band for
Cruncher.
Documentation set in Euclid
and Martian Mono. Fonts
used for documentation not included as part of the license covering the
use of range-input.