Range

Sélectionnez des valeurs numériques à l’aide d’un curseur interactif.

Import

import { Range } from 'asterui'

Exemples

Range basique

Curseur simple avec paramètres par défaut.

</>

import { Range } from 'asterui'

function App() {
  return (
      <Range />
    )
}

export default App

Avec affichage de la valeur

Curseur affichant la valeur actuelle.

</>

50

import { Range } from 'asterui'

function App() {
  return (
      <Range showValue />
    )
}

export default App

Avec étapes

Curseur avec marqueurs d'étapes visibles.

</>

|||||||||||

import { Range } from 'asterui'

function App() {
  return (
      <Range showSteps step={10} />
    )
}

export default App

Contrôlé

Curseur contrôlé avec gestion d'état.

</>

50

Value: 50

import { Range } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState(50);
  
  return (
      <div>
        <Range value={value} onChange={setValue} showValue />
        <p className="mt-2 text-sm text-base-content/70">Value: {value}</p>
      </div>
    )
}

export default App

Plage personnalisée

Curseur avec valeurs min, max et step personnalisées.

</>

5

import { Range } from 'asterui'

function App() {
  return (
      <Range min={0} max={10} step={0.5} defaultValue={5} showValue />
    )
}

export default App

Couleurs

Curseurs dans diverses couleurs de thème.

</>

import { Range, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Range color="primary" defaultValue={25} />
        <Range color="secondary" defaultValue={35} />
        <Range color="accent" defaultValue={45} />
        <Range color="success" defaultValue={55} />
        <Range color="warning" defaultValue={65} />
        <Range color="info" defaultValue={75} />
        <Range color="error" defaultValue={85} />
      </Space>
    )
}

export default App

Tailles

Curseurs dans diverses tailles.

</>

import { Range, Space } from 'asterui'

function App() {
  return (
      <Space size="lg">
        <Range size="xs" defaultValue={25} />
        <Range size="sm" defaultValue={50} />
        <Range size="md" defaultValue={75} />
        <Range size="lg" defaultValue={90} />
      </Space>
    )
}

export default App

Désactivé

Curseur désactivé.

</>

import { Range } from 'asterui'

function App() {
  return (
      <Range disabled defaultValue={60} />
    )
}

export default App

Exemple de contrôle de volume

Exemple concret d'un contrôle de volume.

</>

🔊

50%

import { Range } from 'asterui'
import { useState } from 'react'

function App() {
  const [volume, setVolume] = useState(50);
  
  return (
      <div className="p-4 border border-base-300 rounded-lg">
        <div className="flex items-center gap-3">
          <span className="text-2xl">
            {volume === 0 ? '🔇' : volume < 50 ? '🔉' : '🔊'}
          </span>
          <Range
            value={volume}
            onChange={setVolume}
            color="primary"
            className="flex-1"
          />
          <span className="text-sm font-medium w-12 text-right">{volume}%</span>
        </div>
      </div>
    )
}

export default App

Dans un formulaire

Curseur intégré au composant Form.

</>

Volume

50

 

Brightness

75

 

Submit

import { Range, Form, Button } from 'asterui'

function App() {
  const handleSubmit = (values: Record<string, unknown>) => {
    console.log('Form values:', values);
    alert(JSON.stringify(values, null, 2));
  };
  
  return (
      <Form onFinish={handleSubmit} initialValues={{ volume: 50, brightness: 75 }}>
        <Form.Item name="volume" label="Volume">
          <Range showValue color="primary" />
        </Form.Item>
  
        <Form.Item name="brightness" label="Brightness">
          <Range showValue color="warning" />
        </Form.Item>
  
        <Form.Item>
          <Button htmlType="submit" color="primary">
            Submit
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

API

Range

Propriété	Description	Type	Défaut
value	Valeur contrôlée	number	-
defaultValue	Valeur par défaut (non contrôlée)	number	50
onChange	Callback lorsque la valeur change	(value: number) => void	-
min	Valeur minimale	number	0
max	Valeur maximale	number	100
step	Incrément d’étape	number	1
size	Taille du range	'xs' | 'sm' | 'md' | 'lg'	'md'
color	Thème de couleur du range	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error'	-
disabled	Désactiver l’entrée range	boolean	false
showValue	Afficher la valeur actuelle sous le range	boolean	false
showSteps	Afficher les marqueurs d’étapes sous le range	boolean	false
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• Utilise <input type="range"> natif pour une accessibilité complète
• La valeur est annoncée aux lecteurs d’écran en pourcentage
• Navigation au clavier avec les touches fléchées prise en charge
• Fonctionne avec showValue pour l’affichage visuel de la valeur