/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/slider/MinimumDistanceSlider.js
58 строк
2 KB
Lee Jinwoo
[Slider] Narrow onChange value type (#44777)
23 янв 2025, 22:05
Не верифицирован
23 янв 2025, 22:05
ad4825a
Код
Авторство
О чём код?
import * as React from 'react'; import Box from '@mui/material/Box'; import Slider from '@mui/material/Slider'; function valuetext(value) { return `${value}°C`; } const minDistance = 10; export default function MinimumDistanceSlider() { const [value1, setValue1] = React.useState([20, 37]); const handleChange1 = (event, newValue, activeThumb) => { if (activeThumb === 0) { setValue1([Math.min(newValue[0], value1[1] - minDistance), value1[1]]); } else { setValue1([value1[0], Math.max(newValue[1], value1[0] + minDistance)]); } }; const [value2, setValue2] = React.useState([20, 37]); const handleChange2 = (event, newValue, activeThumb) => { if (newValue[1] - newValue[0] < minDistance) { if (activeThumb === 0) { const clamped = Math.min(newValue[0], 100 - minDistance); setValue2([clamped, clamped + minDistance]); } else { const clamped = Math.max(newValue[1], minDistance); setValue2([clamped - minDistance, clamped]); } } else { setValue2(newValue); } }; return ( <Box sx={{ width: 300 }}> <Slider getAriaLabel={() => 'Minimum distance'} value={value1} onChange={handleChange1} valueLabelDisplay="auto" getAriaValueText={valuetext} disableSwap /> <Slider getAriaLabel={() => 'Minimum distance shift'} value={value2} onChange={handleChange2} valueLabelDisplay="auto" getAriaValueText={valuetext} disableSwap /> </Box> ); }