Skip to main content

Slider

Uncontrolled​

Result
Loading...
Live Editor
<Slider min={0} max={50} value={25} tickLabelFrequency={7} showEndLabel />

Within a form​

Result
Loading...
Live Editor
<div data-testid="within-form">
	<Form
		initialValues={{
			slider: 30,
		}}
		onSubmit={async (values, { setSubmitting }) => {
			console.log(values);
			setSubmitting(false);
		}}
		validationSchema={object().shape({
			slider: number().required().min(10, 'Value must be at least 10'),
		})}
	>
		{({ values }) => (
			<>
				<FormField>
					<Slider label="Slider within a form" name="slider" min={0} max={100} />
				</FormField>

				<NumberField label="Value" value={values.slider} readOnly />
			</>
		)}
	</Form>
</div>