/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/slider/TrackFalseSlider.js
64 строки
1 KB
Jan Potoms
[docs] Use `React.useId()` for demo IDs (#48300)
19 апр 2026, 13:10
Не верифицирован
19 апр 2026, 13:10
107f22c
Код
Авторство
О чём код?
import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Slider from '@mui/material/Slider'; const Separator = styled('div')( ({ theme }) => ` height: ${theme.spacing(3)}; `, ); const marks = [ { value: 0, label: '0°C', }, { value: 20, label: '20°C', }, { value: 37, label: '37°C', }, { value: 100, label: '100°C', }, ]; function valuetext(value) { return `${value}°C`; } export default function TrackFalseSlider() { const id = React.useId(); const rangeId = React.useId(); return ( <Box sx={{ width: 250 }}> <Typography id={`${id}-label`} gutterBottom> Removed track </Typography> <Slider track={false} aria-labelledby={`${id}-label`} getAriaValueText={valuetext} defaultValue={30} marks={marks} /> <Separator /> <Typography id={`${rangeId}-label`} gutterBottom> Removed track range slider </Typography> <Slider track={false} aria-labelledby={`${rangeId}-label`} getAriaValueText={valuetext} defaultValue={[20, 37, 50]} marks={marks} /> </Box> ); }