Visão geral

O Slider usa Base UI e é totalmente acessível via teclado.

Padrão

Range (dois handles)

Desabilitado

Import

import { Slider } from "@/components/ui/slider"

Padrão de implementação

Snippets para uso do Slider.

Slider controlado

"use client"
import { useState } from "react"

export function VolumeControl() {
  const [volume, setVolume] = useState([75])

  return (
    <div className="flex flex-col gap-2">
      <Slider
        value={volume}
        onValueChange={setVolume}
        max={100}
        step={1}
      />
      <span className="text-sm text-muted-foreground">
        Volume: {volume[0]}%
      </span>
    </div>
  )
}

Slider de range de preço

const [preco, setPreco] = useState([0, 500])

<Slider
  value={preco}
  onValueChange={setPreco}
  min={0}
  max={1000}
  step={10}
/>
<span>R$ {preco[0]} – R$ {preco[1]}</span>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter