Reddot UI Library

Docs
Slider

Slider

An input where the user selects a value from within a given range.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/slider.json

Utilisation

Importez le composant Slider et utilisez-le dans votre composant React :

import { Slider } from "@/components/ui/slider"
 
export function SliderDemo() {
  return (
    <Slider
      defaultValue={[50]}
      max={100}
      step={1}
      className="w-[60%]"
    />
  )
}

Exemples

Slider basique

import { Slider } from "@/components/ui/slider"
 
export function SliderBasic() {
  return (
    <div className="space-y-4">
      <div>
        <label className="text-sm font-medium leading-none">Volume</label>
        <Slider defaultValue={[33]} max={100} step={1} className="w-full" />
      </div>
    </div>
  )
}

Slider avec plage

import { Slider } from "@/components/ui/slider"
 
export function SliderRange() {
  return (
    <div className="space-y-4">
      <div>
        <label className="text-sm font-medium leading-none">Prix</label>
        <Slider
          defaultValue={[20, 80]}
          max={100}
          step={1}
          className="w-full"
        />
      </div>
    </div>
  )
}

Slider avec état

"use client"
 
import { useState } from "react"
import { Slider } from "@/components/ui/slider"
 
export function SliderWithState() {
  const [value, setValue] = useState([50])
 
  return (
    <div className="space-y-4">
      <div>
        <label className="text-sm font-medium leading-none">
          Valeur: {value[0]}
        </label>
        <Slider
          value={value}
          onValueChange={setValue}
          max={100}
          step={1}
          className="w-full"
        />
      </div>
    </div>
  )
}

API Reference

Slider

Permet aux utilisateurs de sélectionner une valeur en faisant glisser un contrôle le long d'une piste.

PropTypeDefaultDescription
defaultValuenumber[]-La valeur initiale du slider.
valuenumber[]-La valeur contrôlée du slider.
onValueChange(value: number[]) => void-Gestionnaire d'événement appelé lorsque la valeur change.
onValueCommit(value: number[]) => void-Gestionnaire d'événement appelé lorsque l'utilisateur termine l'interaction avec le slider.
minnumber0La valeur minimale du slider.
maxnumber100La valeur maximale du slider.
stepnumber1L'incrément/décrément de valeur lors du déplacement.
orientation"horizontal" | "vertical""horizontal"L'orientation du slider.
disabledbooleanfalseQuand true, empêche l'utilisateur d'interagir avec le slider.
invertedbooleanfalseQuand true, inverse la direction du slider.
dir"ltr" | "rtl"-La direction de lecture du slider.

Conseils d'utilisation

Valeurs communes

  • Volume : min={0} max={100} step={1}
  • Prix : min={0} max={1000} step={10}
  • Pourcentage : min={0} max={100} step={5}
  • Précision : min={0} max={1} step={0.01}

Bonnes pratiques

  1. Labels clairs : Toujours fournir un label descriptif
  2. Valeurs visibles : Afficher la valeur actuelle pour les utilisateurs
  3. Plages appropriées : Choisir des valeurs min/max sensées pour votre cas d'usage
  4. Pas de progression : Utiliser un step approprié pour la précision requise

Références