'%3e%3cpath%20d='M19%2028.5C19%2025.9804%2020.0009%2023.5641%2021.7825%2021.7825C23.5641%2020.0009%2025.9804%2019%2028.5%2019C31.0196%2019%2033.4359%2020.0009%2035.2175%2021.7825C36.9991%2023.5641%2038%2025.9804%2038%2028.5C38%2031.0196%2036.9991%2033.4359%2035.2175%2035.2175C33.4359%2036.9991%2031.0196%2038%2028.5%2038C25.9804%2038%2023.5641%2036.9991%2021.7825%2035.2175C20.0009%2033.4359%2019%2031.0196%2019%2028.5Z'%20fill='%231ABCFE'/%3e%3cpath%20d='M0%2047.5C0%2044.9804%201.00089%2042.5641%202.78249%2040.7825C4.56408%2039.0009%206.98044%2038%209.5%2038H19V47.5C19%2050.0196%2017.9991%2052.4359%2016.2175%2054.2175C14.4359%2055.9991%2012.0196%2057%209.5%2057C6.98044%2057%204.56408%2055.9991%202.78249%2054.2175C1.00089%2052.4359%200%2050.0196%200%2047.5H0Z'%20fill='%230ACF83'/%3e%3cpath%20d='M19%200V19H28.5C31.0196%2019%2033.4359%2017.9991%2035.2175%2016.2175C36.9991%2014.4359%2038%2012.0196%2038%209.5C38%206.98044%2036.9991%204.56408%2035.2175%202.78249C33.4359%201.00089%2031.0196%200%2028.5%200L19%200Z'%20fill='%23FF7262'/%3e%3cpath%20d='M0%209.5C0%2012.0196%201.00089%2014.4359%202.78249%2016.2175C4.56408%2017.9991%206.98044%2019%209.5%2019H19V0H9.5C6.98044%200%204.56408%201.00089%202.78249%202.78249C1.00089%204.56408%200%206.98044%200%209.5H0Z'%20fill='%23F24E1E'/%3e%3cpath%20d='M0%2028.5C0%2031.0196%201.00089%2033.4359%202.78249%2035.2175C4.56408%2036.9991%206.98044%2038%209.5%2038H19V19H9.5C6.98044%2019%204.56408%2020.0009%202.78249%2021.7825C1.00089%2023.5641%200%2025.9804%200%2028.5H0Z'%20fill='%23A259FF'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1_137'%3e%3crect%20width='38'%20height='57'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=small}
Choose a number value within a range.
Importing
The component can be imported via:
Usage
A PlumaSlider accepts a number value, and two callbacks:
onInput- called when the value changes, while dragging the slideronChange- called when the value is "committed", when the slider is released
Additionally, like other form components, the component requires a label
(or, otherwise, an ariaLabel or ariaLabelledby).
A simple slider might look like this:
This example demonstrates when the onChange and onInput callbacks are called:
onInput can be used when we need to update the UI immediately - for example, when
there are other elements that depend on this value.
onChange (without onInput) can be used when we only need the value later,
for example, when saving the state.
Min, max and step
Internally, the component uses an input of type="range",
and accepts a minimum, maximum and step value via the minValue, maxValue and step props.
Ticks and soft snap
Pass a ticks array to render tick marks along the track at arbitrary
positions (in the slider's own value space). Ticks with a label render as
clickable buttons below the track that jump the slider to that tick.
Set snapToTicks to snap the value to the nearest tick when the user
releases the slider. Continuous drag is not affected — onInput still fires
with the raw value; only onChange (fired on release) is snapped.
Use snapToleranceFraction (default 0.03, i.e. 3% of maxValue - minValue)
to control how close to a tick the release position must be to snap.
When snapToTicks is on, keyboard navigation walks between ticks instead
of stepping by step: ←/↓ jump to the previous tick, →/↑ jump to
the next tick, and Home/End jump to the first/last tick. If a consumer
needs fine-grained keyboard entry alongside ticks (e.g. a numeric input
pair), pair the slider with a separate number field.
Customizing labels
If a string label is not sufficient, a component can be used to render the label.
In React, the label prop accepts any ReactNode.
Customizing descriptions
If a string description is not sufficient, a component can be used to render the description.
In React, the description prop accepts any ReactNode.
Customizing errors
If a string error is not sufficient, a component can be used to render the error.
In React, the error prop accepts any ReactNode.
API
PlumaSlider extends Box
Element (or elements) that describe the form field. Also used for error messages, as aria-errormessage isn't supported in all assistive technologies: https://a11ysupport.io/tech/aria/aria-errormessage_attribute
String value that labels the form field.
Element (or elements) that label the form field.
A description for the field, providing additional context or hints.
An error message associated with the form field.
Boolean: Ember-only. If the error named block is used,
this prop can be set to true to indicate an error is present,
which will make the error block render.
An optional id to be assigned to the input element. Also used to generate ids for labels and error messages. If one isn't provided, it will be generated.
Whether the form field is disabled.
Whether the form field is in an invalid state.
The label text to show with the form field.
Default:100
The maximum value.
Default:0
The minimum value.
The name attribute is used for HTML forms
Called when the value change is committed (when the slider is let go).
When snapToTicks is on, the value passed here is already snapped.
Called when the value changes.
Called when a tick's label is clicked. Receives the tick's value. The
slider's value and onChange also fire.
Whether to allow browser autofill and password managers. When false (default), adds attributes to disable password managers (1Password, LastPass, Bitwarden, Dashlane). Set to true for fields where autofill is desired (e.g., email, password, address fields).
Whether the generated description id should be included in the input's aria-describedby attribute.
Disable this when a label`` tag surrounds the input as well as it's description text, for example in an OptionCard` component.
Whether the generated label id should be included in the input's aria-labelledby attribute.
Disable this when the label tag surrounds the input as well as it's label text,
for example in an OptionCard component.
By default, form elements will throw an error if no label or aria-label is provided. Disable this to suppress the error, for example when building a custom form element, and you want to handle labeling yourself.
Default:0.03
How close (as a fraction of the value range) the release position must be
to a tick to snap. Only used when snapToTicks is true.
Default:false
If true, releasing the slider within snapToleranceFraction of a tick
snaps the value to that tick. Drag stays continuous (onInput is not
snapped). Keyboard arrows walk between ticks (←/↓ previous, →/↑
next, Home/End first/last). Programmatic value changes are not
snapped.
Default:1
The step value.
Optional tick marks rendered along the track. Positioned by value in the
slider's own value space (between minValue and maxValue). Ticks with a
label render a clickable label below the track that jumps the slider to
that tick.
Additional classes to be applied to the description element.
Additional classes to be applied to the error element.
Additional classes to be applied to the field node.
Ember-only: this is used internally to detect whether a label
named block is present, and to ignore empty label props if so.
Additional classes to be applied to the input node.
Sets the size attribute on the input element. This controls the visible width of the input in characters.
Additional classes to be applied to the label node.
The current value.
Whether to apply the center-baseline variant.