Code

Installation

yarn add @twilio-labs/match formik

Usage

import { Formik } from "formik";
import { Input, Form } from "@twilio-labs/match/components";
const Component = () => (
<Formik initialValues={{ sheep: "" }} onSubmit={() => {}}>
<Form>
<Slider name="sheep" label="Number of Sheep:" min={0} max={100} />
</Form>
</Formik>
);

Props

PropTypeDefaultDescription
namestringnull
labelstringnull
required?booleannullSets the input as required.
disabled?booleannullDisables the input.
validate?(value: string) => stringnullOverrides built in validation.
noValidate?booleannullDisables built in validation.
minnumbernullStarting slider range.
maxnumbernullEnding slider range.
maxPlus?booleanfalseAppends a plus sign to the max value.
step?number1Slider stepping interval.
alignment?LabelAlignment'left''left', 'center'

Guidelines

About Inputs

A Slider provides a coarse numeric value input that must be within a defined range of numbers.

Accessibility

Here are some quick accessibility tips to ensure a positive user experience for all users.

  • Always include a descriptive label for each Slider.
  • Only use a Slider when the exact input value is not important.
  • Do not use ranges that are extremely large (i.e. 1-1,000).
  • Do not use ranges that are too small (i.e. 1-3).
  • Use error messages to provide information on how to correct invalid data.

Composition

All Sliders must include minimum and maximum allowable input range and a short, descriptive label.

When a Slider contains invalid data, provide an error message with instructional cues on how to make the correction.

Sliders should only be used on a white background.

Do
  • Use Sliders when approximate input values are desired.
Don't
  • Don't use a slider if choosing a specific value is important. The slider interaction isn't as precise as explicitly typing or choosing an option from a list.

Examples

Slider with Left Alignment

Slider labels are left aligned by default. The selected value will appear to the right of the label text.

Slider with Center Alignment

When a Slider label is centered, the selected value appears on the left.

Slider with Error

If a Slider is required a value of 0 will be considered invalid. You may override the built in validation with the validate prop, or completely disable with noValidate. For more advanced validation please read the Formik documentation.

Disabled Slider

Disabled form fields cannot be interacted with.