/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/slider/InputSlider.js
67 строк
2 KB
Diego Andai
[material-ui][Grid2] Rename to Grid (#45381)
24 фев 2025, 21:01
Не верифицирован
24 фев 2025, 21:01
f0de39a
Код
Авторство
О чём код?
import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Slider from '@mui/material/Slider'; import MuiInput from '@mui/material/Input'; import VolumeUp from '@mui/icons-material/VolumeUp'; const Input = styled(MuiInput)` width: 42px; `; export default function InputSlider() { const [value, setValue] = React.useState(30); const handleSliderChange = (event, newValue) => { setValue(newValue); }; const handleInputChange = (event) => { setValue(event.target.value === '' ? 0 : Number(event.target.value)); }; const handleBlur = () => { if (value < 0) { setValue(0); } else if (value > 100) { setValue(100); } }; return ( <Box sx={{ width: 250 }}> <Typography id="input-slider" gutterBottom> Volume </Typography> <Grid container spacing={2} sx={{ alignItems: 'center' }}> <Grid> <VolumeUp /> </Grid> <Grid size="grow"> <Slider value={typeof value === 'number' ? value : 0} onChange={handleSliderChange} aria-labelledby="input-slider" /> </Grid> <Grid> <Input value={value} size="small" onChange={handleInputChange} onBlur={handleBlur} inputProps={{ step: 10, min: 0, max: 100, type: 'number', 'aria-labelledby': 'input-slider', }} /> </Grid> </Grid> </Box> ); }