/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/slider/NonLinearSlider.js
50 строк
1 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 Typography from '@mui/material/Typography'; import Slider from '@mui/material/Slider'; function valueLabelFormat(value) { const units = ['KB', 'MB', 'GB', 'TB']; let unitIndex = 0; let scaledValue = value; while (scaledValue >= 1024 && unitIndex < units.length - 1) { unitIndex += 1; scaledValue /= 1024; } return `${scaledValue} ${units[unitIndex]}`; } function calculateValue(value) { return 2 ** value; } export default function NonLinearSlider() { const [value, setValue] = React.useState(10); const handleChange = (event, newValue) => { setValue(newValue); }; return ( <Box sx={{ width: 250 }}> <Typography id="non-linear-slider" gutterBottom> Storage: {valueLabelFormat(calculateValue(value))} </Typography> <Slider value={value} min={5} step={1} max={30} scale={calculateValue} getAriaValueText={valueLabelFormat} valueLabelFormat={valueLabelFormat} onChange={handleChange} valueLabelDisplay="auto" aria-labelledby="non-linear-slider" /> </Box> ); }