Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

A Slider allows a user to choose a number between a minimum and maximum value. It may display titles for these values, and may be "stepped", so that its value only changes in increments of a given number.

PropTypeNotes
valuenumber
disabledboolean
validationfunction
onValueChangefunction
minnumberThe input's minimum value.
maxnumberThe input's maximum value.
stepnumberThe input's step.
titlesbooleanWhether to display titles for the input's min, max and value.

See the Inputs section for more on how inputs work in Learn.

Examples

// Overrides

import { Override } from 'framer'

export function SliderExample(): Override {
	return {
		min: 0,
		max: 100,
		value: 60,
		step: 1,
		validation: (value) => value >= 50,
		onValueChange: (value, valid) =>
			console.log('Value: ' + value, 'Valid' + valid),
	}
}
// Code component

import * as React from 'react'
import { Frame } from 'framer'
// @ts-ignore
import { Slider } from '@framer/steveruizok.education/code'

export const SliderExample = (props) => {
	const handleValueChange = (value, valid) =>
		console.log('Value: ' + value, 'Valid: ' + valid)

	return (
		<Frame size="100%" background="none">
			<Slider
				min={0}
				max={100}
				value={60}
				step={1}
				validation={(value) => value >= 50}
				onValueChange={handleValueChange}
				center
			/>
		</Frame>
	)
}