/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/slider/CustomMarks.js
54 строки
1 KB
Victor Zanivan Monteiro
[docs][material-ui][Slider] Remove custom divs from new demo (#40674)
18 янв 2024, 22:53
Не верифицирован
18 янв 2024, 22:53
8d9d42f
Код
Авторство
О чём код?
import * as React from 'react'; import Box from '@mui/material/Box'; import Slider from '@mui/material/Slider'; import Typography from '@mui/material/Typography'; const MAX = 100; const MIN = 0; const marks = [ { value: MIN, label: '', }, { value: MAX, label: '', }, ]; export default function CustomMarks() { const [val, setVal] = React.useState(MIN); const handleChange = (_, newValue) => { setVal(newValue); }; return ( <Box sx={{ width: 250 }}> <Slider marks={marks} step={10} value={val} valueLabelDisplay="auto" min={MIN} max={MAX} onChange={handleChange} /> <Box sx={{ display: 'flex', justifyContent: 'space-between' }}> <Typography variant="body2" onClick={() => setVal(MIN)} sx={{ cursor: 'pointer' }} > {MIN} min </Typography> <Typography variant="body2" onClick={() => setVal(MAX)} sx={{ cursor: 'pointer' }} > {MAX} max </Typography> </Box> </Box> ); }