InputSlider

Input sliders allow users to make selections from a range of values.

InputSliders are ideal for adjusting settings such as volume, brightness, or applying image filters.

Continuous InputSlider

Discrete InputSlider

Bidirectional InputSlider (Range Slider)

If you pass a touple (array with just two elements) as value or defaultValue, you will get a bidirectional slider.

Controlled InputSlider

You can use the value, and onChange properties to control the value state of the input slider.


API

Learn more about the properties and the customization points.

Usage

import InputSlider from "@sonnat/ui/InputSlider";


//or
import { InputSlider } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

InputSlider Properties
NameTypeDefaultDescription
classNamestring-Append to the class names applied to the component so you can override or extend the styles.
maxnumber100The maximum allowed value of the slider. Should not be equal to min.
minnumber0The minimum allowed value of the slider. Should not be equal to max.
fractionDigitsnumber4The Number of digits after the decimal point. Must be in the range 0 to 20, inclusive.
stepnumber-The granularity with which the slider can step through values.
It's required to use this when you are using a discrete slider.
valuenumber[ ] | number-The value of the slider.
For bidirectional sliders, provide an array with two values.
defaultValuenumber[ ] | number-The default value. Use when the component is not controlled.
For bidirectional sliders, provide an array with two values.
variant"continuous"
| "discrete"		"continuous"The variant of the slider.
disabledbooleanfalseIf true, the slider will be disabled.
onMountfunction-The callback fires when the component mounts.
Signature: function() => void
onDismountfunction-The callback fires when the component dismounts.
Signature: function() => void
onChangefunction-The callback fires when the value has changed.
Signature: function(value: number[] | number) => void
onDraggingfunction-The callback fires when the slider is being dragged.
Signature: function(state: State) => void
Where the State is:
interface HandleState {
  active: boolean;
  currentX: number;
  initialX: number;
  offsetX: number;
  zIndex: number;
};

interface State {
  sup: HandleState & { right: number };
  inf: HandleState & { left: number };
  track: { right: number; left: number };
};
onDragStartfunction-The callback fires when the dragging starts.
Signature: function(state: State) => void
Where the State is:
interface HandleState {
  active: boolean;
  currentX: number;
  initialX: number;
  offsetX: number;
  zIndex: number;
};

interface State {
  sup: HandleState & { right: number };
  inf: HandleState & { left: number };
  track: { right: number; left: number };
};
onDragEndfunction-The callback fires when the dragging ends.
Signature: function(state: State) => void
Where the State is:
interface HandleState {
  active: boolean;
  currentX: number;
  initialX: number;
  offsetX: number;
  zIndex: number;
};

interface State {
  sup: HandleState & { right: number };
  inf: HandleState & { left: number };
  track: { right: number; left: number };
};
  • The ref is forwarded to the root element.
  • Any other properties supplied will be provided to the root element.