Slider

View in Lexicon

A Slider allows the user to select values in a linear range of values.

installyarn add @clayui/slider
versionNPM Version
useimport Slider from '@clayui/slider';

Table of Contents

Slider is a controlled component and needs just 2 props for its basic use, value and onChange.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Slider from '@clayui/slider';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<div className="form-group">
					<label htmlFor="slider">With Tooltip</label>
					<Slider defaultValue={10} id="slider" />
				</div>
			</div>
		</Provider>
	);
}

Range and Step

For a more specific use case you can specify other props, like min and max to determine the range, and step to specify how much the value changes.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Slider from '@clayui/slider';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<div className="form-group">
					<label htmlFor="slider">Decades</label>
					<Slider
						defaultValue={10}
						id="slider"
						max={2020}
						step={10}
					/>
				</div>
			</div>
		</Provider>
	);
}

API Reference

Slider

({ className, defaultValue, disabled, max, min, onChange, onValueChange, showTooltip, step, tooltipPosition, value, ...otherProps }: IProps) => JSX.Element
Parameters
Properties

defaultValue

number | undefined

Property to set the default value (uncontrolled).

disabled

boolean | undefined

Flag that will disable component features.

max

number | undefined= 100

Sets maximum permitted value.

min

number | undefined

Sets minimum permitted value

onChange

InternalDispatch<number> | undefined

Callback will always be called when the slider value changes (controlled).

Deprecated

onValueChange

InternalDispatch<number> | undefined

Callback will always be called when the slider value changes.

showTooltip

boolean | undefined= true

Flag to show tooltip or not.

step

number | undefined= 1

Sets stepping interval.

tooltipPosition

"top" | "bottom" | undefined= "top"

Set tooltip position.

value

number | undefined

Set the current value of the slider (controlled).

Returns
Element
Edit this page on GitHub

Contributors

Matuzalém Teles, Bryce Osterhaus, Krešimir Čoko

Last edited January 29, 2025 at 1:35:02 AM

Table of Contents