Files
react-test/docs/data/material/components/slider/VerticalSlider.js
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

55 lines
1.0 KiB
JavaScript

import Stack from '@mui/material/Stack';
import Slider from '@mui/material/Slider';
export default function VerticalSlider() {
return (
<Stack sx={{ height: 300 }} spacing={1} direction="row">
<Slider
aria-label="Temperature"
orientation="vertical"
getAriaValueText={getAriaValueText}
valueLabelDisplay="auto"
defaultValue={30}
/>
<Slider
aria-label="Temperature"
orientation="vertical"
defaultValue={30}
valueLabelDisplay="auto"
disabled
/>
<Slider
getAriaLabel={() => 'Temperature'}
orientation="vertical"
getAriaValueText={getAriaValueText}
defaultValue={[20, 37]}
valueLabelDisplay="auto"
marks={marks}
/>
</Stack>
);
}
function getAriaValueText(value) {
return `${value}°C`;
}
const marks = [
{
value: 0,
label: '0°C',
},
{
value: 20,
label: '20°C',
},
{
value: 37,
label: '37°C',
},
{
value: 100,
label: '100°C',
},
];