<y-input>

A vertical slider input with scaling, step, ticks, units, output display and multiple value handles.

Value Gain Range

Import

Import and register the <y-input> custom element, upgrading any instances already in the DOM:

import YInput from '../../literal/documentation/templates/y-input.js';

Use

Author vertical sliders:

<y-input>Volume</y-input>

Attributes

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:

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:

Display 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:

value ="0"

The initial value of the element. As a <y-input> can handle any number of values, this may be series of space or comma separated values such as:

value="0 1 2"

Values may also be given an optional label, rendered as a handle’s title (a title is announced to screen readers and appears when hovering on a handle):

value="0 [First] 1 [Second] 2 [Last]"

Properties

.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.

.value

The value of the element expressed as a string of space-separated numbers.

(Note that the value string is not the same as the serialized form data submitted when the <y-input> is part of a form.)

.data

The value of the element as an array of objects.

Objects represent the values of the input. The array and objects are ‘live’ – they mutate in response to moved handles, and handles move when object values are changed.

Events

"input"

Emitted from the element during the movement of a handle.

"change"

Emitted from the element when a handle has been moved.

Parts

::part(label)

Style the label.

::part(tick)

Style the tick marks.

::part(output)

Style the display of the output value.

Variables

--value-color

--value-color-start

--value-color-end

--handle-color

--handle-background

--handle-border

--output-color

--track-background

--track-padding

Make the range input slightly wider than the control to allow range thumb to line up with label text.

Contribute

Support development: Sponsor

Built by Stephen Band for Cruncher logo Cruncher.

Documentation set in Euclid and Martian Mono. Fonts used for documentation not included as part of the license covering the use of y-input.