# Slider Props (свойства) для компонента Slider: [{"name":"view","type":{"name":"enum","raw":"\"default\" | \"accent\" | \"gradient\"","value":[{"value":"\"default\""},{"value":"\"accent\""},{"value":"\"gradient\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"min","type":{"name":"number"}},{"name":"max","type":{"name":"number"}},{"name":"label","type":{"name":"string"}},{"name":"labelContentLeft","type":{"name":"ReactNode"}},{"name":"labelPlacement","type":{"name":"enum","raw":"\"outer\" | \"inner\"","value":[{"value":"\"outer\""},{"value":"\"inner\""}]}},{"name":"rangeValuesPlacement","type":{"name":"string"}},{"name":"settings","type":{"name":"Partial<{ indent?: number; fontSizeMultiplier?: number; backgroundColor?: string | undefined; fillColor?: string | undefined; }> | undefined"}},{"name":"onChange","type":{"name":"((event: FormTypeNumber) => void) | ((value: number) => void) | ((values: number[]) => void) | ((event: FormTypeString) => void)"}},{"name":"name","type":{"name":"string"}},{"name":"value","type":{"name":"number | number[]"}},{"name":"defaultValue","type":{"name":"number | number[]"}},{"name":"orientation","type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},{"name":"scaleAlign","type":{"name":"enum","raw":"\"none\" | \"bottom\" | \"side\"","value":[{"value":"\"none\""},{"value":"\"bottom\""},{"value":"\"side\""}]}},{"name":"sliderAlign","type":{"name":"enum","raw":"\"none\" | \"center\" | \"right\" | \"left\"","value":[{"value":"\"none\""},{"value":"\"center\""},{"value":"\"right\""},{"value":"\"left\""}]}},{"name":"reversed","type":{"name":"boolean"}},{"name":"labelReversed","type":{"name":"boolean"}},{"name":"onChangeCommitted","type":{"name":"((value: number) => void) | ((value: number[]) => void)"}},{"name":"ariaLabel","type":{"name":"string | string[]"}},{"name":"showCurrentValue","type":{"name":"boolean"}},{"name":"showRangeValues","type":{"name":"boolean"}},{"name":"showScale","type":{"name":"boolean"}},{"name":"hideMinValueDiff","type":{"name":"number"}},{"name":"hideMaxValueDiff","type":{"name":"number"}},{"name":"labelContent","type":{"name":"ReactNode"}},{"name":"multipleStepSize","type":{"name":"number"}},{"name":"type","type":{"name":"enum","raw":"\"single\" | \"double\"","value":[{"value":"\"single\""},{"value":"\"double\""}]}},{"name":"pointerSize","type":{"name":"enum","raw":"\"none\" | \"small\" | \"large\"","value":[{"value":"\"none\""},{"value":"\"small\""},{"value":"\"large\""}]}},{"name":"pointerVisibility","type":{"name":"enum","raw":"\"always\" | \"hover\"","value":[{"value":"\"always\""},{"value":"\"hover\""}]}},{"name":"currentValueVisibility","type":{"name":"enum","raw":"\"always\" | \"hover\"","value":[{"value":"\"always\""},{"value":"\"hover\""}]}},{"name":"onChangeTextField","type":{"name":"((value: number[], event: ChangeEvent<HTMLInputElement>) => void)"}},{"name":"onBlurTextField","type":{"name":"((value: number[], event: FocusEvent<HTMLInputElement, Element>) => void)"}},{"name":"onKeyDownTextField","type":{"name":"((value: number[], event: KeyboardEvent<HTMLInputElement>) => void)"}}] ## Использование
```tsx
import React, { useState } from 'react';
import { Slider  } from '@salutejs/plasma-web';
export function App() {
const [value, setValue] = useState(30);
const onChangeCommittedHandle = (value) => {
setValue(value);
};
const onChangeHandle = (value) => {
setValue(value);
};
return (
<section>
<Slider onChange={onChangeHandle} onChangeCommitted={onChangeCommittedHandle} min={0} max={100} value={value} />
</section>
);
}
```
# Slider Props (свойства) для компонента Slider: [{"name":"view","type":{"name":"enum","raw":"\"default\" | \"accent\" | \"gradient\"","value":[{"value":"\"default\""},{"value":"\"accent\""},{"value":"\"gradient\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"min","type":{"name":"number"}},{"name":"max","type":{"name":"number"}},{"name":"label","type":{"name":"string"}},{"name":"labelContentLeft","type":{"name":"ReactNode"}},{"name":"labelPlacement","type":{"name":"enum","raw":"\"outer\" | \"inner\"","value":[{"value":"\"outer\""},{"value":"\"inner\""}]}},{"name":"rangeValuesPlacement","type":{"name":"string"}},{"name":"settings","type":{"name":"Partial<{ indent?: number; fontSizeMultiplier?: number; backgroundColor?: string | undefined; fillColor?: string | undefined; }> | undefined"}},{"name":"onChange","type":{"name":"((event: FormTypeNumber) => void) | ((value: number) => void) | ((values: number[]) => void) | ((event: FormTypeString) => void)"}},{"name":"name","type":{"name":"string"}},{"name":"value","type":{"name":"number | number[]"}},{"name":"defaultValue","type":{"name":"number | number[]"}},{"name":"orientation","type":{"name":"enum","raw":"\"horizontal\" | \"vertical\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""}]}},{"name":"scaleAlign","type":{"name":"enum","raw":"\"none\" | \"bottom\" | \"side\"","value":[{"value":"\"none\""},{"value":"\"bottom\""},{"value":"\"side\""}]}},{"name":"sliderAlign","type":{"name":"enum","raw":"\"none\" | \"center\" | \"right\" | \"left\"","value":[{"value":"\"none\""},{"value":"\"center\""},{"value":"\"right\""},{"value":"\"left\""}]}},{"name":"reversed","type":{"name":"boolean"}},{"name":"labelReversed","type":{"name":"boolean"}},{"name":"onChangeCommitted","type":{"name":"((value: number) => void) | ((value: number[]) => void)"}},{"name":"ariaLabel","type":{"name":"string | string[]"}},{"name":"showCurrentValue","type":{"name":"boolean"}},{"name":"showRangeValues","type":{"name":"boolean"}},{"name":"showScale","type":{"name":"boolean"}},{"name":"hideMinValueDiff","type":{"name":"number"}},{"name":"hideMaxValueDiff","type":{"name":"number"}},{"name":"labelContent","type":{"name":"ReactNode"}},{"name":"multipleStepSize","type":{"name":"number"}},{"name":"type","type":{"name":"enum","raw":"\"single\" | \"double\"","value":[{"value":"\"single\""},{"value":"\"double\""}]}},{"name":"pointerSize","type":{"name":"enum","raw":"\"none\" | \"small\" | \"large\"","value":[{"value":"\"none\""},{"value":"\"small\""},{"value":"\"large\""}]}},{"name":"pointerVisibility","type":{"name":"enum","raw":"\"always\" | \"hover\"","value":[{"value":"\"always\""},{"value":"\"hover\""}]}},{"name":"currentValueVisibility","type":{"name":"enum","raw":"\"always\" | \"hover\"","value":[{"value":"\"always\""},{"value":"\"hover\""}]}},{"name":"onChangeTextField","type":{"name":"((value: number[], event: ChangeEvent<HTMLInputElement>) => void)"}},{"name":"onBlurTextField","type":{"name":"((value: number[], event: FocusEvent<HTMLInputElement, Element>) => void)"}},{"name":"onKeyDownTextField","type":{"name":"((value: number[], event: KeyboardEvent<HTMLInputElement>) => void)"}}] ## Использование ```tsx
import React, { useState } from 'react';
import { Slider  } from '@salutejs/plasma-web';
export function App() {
const [value, setValue] = useState(30);
const onChangeCommittedHandle = (value) => {
setValue(value);
};
const onChangeHandle = (value) => {
setValue(value);
};
return (
<section>
<Slider onChange={onChangeHandle} onChangeCommitted={onChangeCommittedHandle} min={0} max={100} value={value} />
</section>
);
}
```
Можно использовать диапазон значений.
```tsx
import React, { useState } from 'react';
import { Slider  } from '@salutejs/plasma-web';
export function App() {
const [value, setValue] = useState([10, 80]);
const sortValues = (values) => {
return values
.map((val) => {
if (val < 0) {
return 0;
}
if (val > 100) {
return 100;
}
return val;
})
.sort((a, b) => a - b);
};
const onChangeHandle = (values) => {
setValue(sortValues(values));
};
const onChangeCommitedHandle = (values) => {
setValue(sortValues(values));
};
const onBlurTextField = (values) => {
setValue(sortValues(values));
};
const onKeyDownTextField = (values, event) => {
if (event.key === 'Enter') {
setValue(sortValues(values));
}
};
return (
<section>
<Slider value={value}
onKeyDownTextField={onKeyDownTextField}
onBlurTextField={onBlurTextField}
onChangeCommitted={onChangeCommitedHandle}
onChange={onChangeHandle} min={0} max={100} />
</section>
);
}
```
## Вертикальное отображение 
```tsx
import React, { useState } from 'react';
import { Slider  } from '@salutejs/plasma-web';
import { IconMic } from '@salutejs/plasma-icons';
export function App() {
const [value, setValue] = useState(30);
const onChangeCommittedHandle = (value) => {
setValue(value);
};
const onChangeHandle = (value) => {
setValue(value);
};
return (
<section style={{ height: '300px' }}>
<Slider
value={value}
onChange={onChangeHandle}
onChangeCommitted={onChangeCommittedHandle}
min={0}
max={100}
label="Громкость"
labelContent={<IconMic size="s" />}
orientation="vertical"
sliderAlign="center"
size="m"
/>
</section>
);
}
```