Slider#

Компонент выбора значения на числовой прямой

№	Свойство	Описание	Значение по умолчанию
1	onChange	Событие изменения значения `((value: number) => void)`	-
2	color	Цвет текущей активной границы (string)	-
3	disabled	Заблокировать слайдер (boolean)	-
4	step	Шаг значений слайдера (number)	0.01
5	value	Текущее значение слайдера (number)	0
6	classes	JSS-классы для стилизации `Partial<Record<"disabled" / "slider" / "tooltip" / "track" / "marker" / "active" / "range" / "rail" / "thumb" / "tick"`	"tickLabel", string>>`
7	min	Минимальное значение границы слайдера (number)	0
8	max	Максимальное значение границы слайдера (number)	100
9	ticks	Отрисовка элементом ticks может быть реализована как силами компонента, так и с использованием пользовательских данных. Если в качестве значение передано булево значение — элементы ticks будут отрисованы на каждый шаг. Если будут переданы пользовательские элементы ticks — соответственно они же и будут отрисованы (boolean)	TickItem[]`
10	inverted	Инверсивное направление движения слайдера (boolean)	-
11	markerProps	Свойства элемента marker `InputHTMLAttributes<HTMLDivElement>`	-

Интерфейс TickItem#

№	Свойство	Описание	Значение по умолчанию
1	label	Подпись под насечкой (ReactNode)	-
2	value	Значение, на котором должна быть установлена насечка (number)	-

import { Slider } from '@v-uik/slider'

Базовый пример компонента Slider#

import * as React from 'react'
import { Slider } from '@v-uik/slider'

export const Basic = (): React.ReactElement => {
  const [value, setValue] = React.useState(1)

  return <Slider min={0} max={10} step={1} value={value} onChange={setValue} />
}

Пример с визуальным отображением возможных значений в виде насечек на прямой#

import * as React from 'react'
import { Slider } from '@v-uik/slider'

export const WithTicks = (): React.ReactElement => {
  const [value, setValue] = React.useState(1)

  return (
    <Slider ticks min={0} max={10} step={1} value={value} onChange={setValue} />
  )
}

Пример с визуальным отображением пользовательских значений в виде насечек на прямой#

import * as React from 'react'
import { Slider, Tick } from '@v-uik/slider'

const ticks: Tick[] = [
  {
    value: 3,
    label: 'Маловато',
  },
  {
    value: 7,
    label: 'Приемлемо',
  },
]

export const WithCustomTicks = (): React.ReactElement => {
  const [value, setValue] = React.useState(0)

  return (
    <Slider
      ticks={ticks}
      min={0}
      max={10}
      step={1}
      value={value}
      onChange={setValue}
    />
  )
}

Пример с отключением слайдера#

import * as React from 'react'
import { Slider } from '@v-uik/slider'

export const Disabled = (): React.ReactElement => {
  const [value, setValue] = React.useState(1)

  return (
    <Slider
      disabled
      min={0}
      max={10}
      step={1}
      value={value}
      onChange={setValue}
    />
  )
}

Пример слайдера с подписью#

import * as React from 'react'
import { Slider } from '@v-uik/slider'
import { InputLabel } from '@v-uik/input-label'

export const Labelled = (): React.ReactElement => {
  const [value, setValue] = React.useState(1)

  return (
    <>
      <InputLabel id="volumeLabel">Громкость</InputLabel>
      <Slider
        min={0}
        max={10}
        step={1}
        value={value}
        markerProps={{
          'aria-labelledby': 'volumeLabel',
        }}
        onChange={setValue}
      />
    </>
  )
}