Slider

Отображает ползунок

Используется для задания значений из непрерывного диапазона или диапазона дискретных значений.

Выбор значения возможен путем перемещения бегунка, либо путем щелчка мыши в диапазоне допустимых значений.

  <Slider />

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
CSS	Массив строк-классов CSS-стилей компонента	array
Hidden	Признак состояния компонента Скрыт	boolean
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
KeyField	Значение ключа для отрисовки компонента	string
Model	Псевдоним свойств Value и OutputValue	any
OnClick	Обработчик события Click	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnUnmount	Обработчик события Unmount	undefined
OutputValue	Привязка отрисованного компонента к модели	any
Point	Признак типа ползунка дискретного диапазона	boolean
Size	Предопределенный размер ползунка в пикселях	enum	normal	`short` - Укороченный — 104 px `normal` - Стандартный — 248 px
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
State	Массив объектов допустимых значений	array
Step	Размер интервала между метками для ползунка дискретного диапазона	number	1
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Unit	Символ для обозначения единицы измерения выбранного значения	string	%
Value	Предустановленное положение индикатора, показывающего текущее значение	string
ValueField	Ключ для записи в модель	string
Visible	Признак инверсии состояния компонента Скрыт	boolean	True

Примеры

Данные:

"simpleSlider": 10, "simpleShortSlider": 50, "pointSlider": "day", "pointShortSlider": "year"

JSX:

<Group Mode={"Column"}>
    <Group Mode="Row" Height="auto" CSS={['mb-24']}>
      <Group Mode="Column" Width="170px" CSS={['mr-24']}>
        <Text Mode="Medium_20" Value="Default" CSS={['mb-24']} />
        <Text Mode="Regular_14_2" Value="Самый простой слайдер." />
      </Group>
      <Group Mode="Column" CSS={['mt-24', 'mr-24']} Width="330px">
        <Text Mode="Medium_18" Value="" CSS={['mb-24']} />
  
        <Group Height="auto">
          <Slider
            Model-var="simpleSlider"
          />
        </Group>
      </Group>
      <Group Mode="Column" CSS={['mt-24']}>
        <Text Mode="Medium_18" Value="" CSS={['mb-24']} />
  
        <Group Height="auto">
          <Slider
            Model-var="simpleShortSlider"
            Size="short"
          />
        </Group>
      </Group>
    </Group>
    <Group Mode="Row">
      <Group Mode="Column" Width="170px" CSS={['mr-24']}>
        <Text Mode="Medium_20" Value="Point" CSS={['mb-24']} />
        <Text Mode="Regular_14_2" Value="Позволяет выбирать значения заранее заданные на слайдере." />
      </Group>
      <Group Mode="Column" CSS={['mt-24', 'mr-24']} Width="330px">
        <Text Mode="Medium_18" Value="" CSS={['mb-24']} />
  
        <Group Height="auto">
          <Slider
            Model-var="pointSlider"
            Point={true}
            State={[
              { key: 'day', value: 'день' },
              { key: 'week', value: 'нед.' },
              { key: 'month', value: 'мес.' },
              { key: 'year', value: 'год' },
              { key: 'quarter', value: 'квартал' }
            ]}
            KeyField="key"
            ValueField="value"
          />
        </Group>
      </Group>
      <Group Mode="Column" CSS={['mt-24']}>
        <Text Mode="Medium_18" Value="" CSS={['mb-24']} />
  
        <Group Height="auto">
          <Slider
            Model-var="pointShortSlider"
            Size="short"
            Point={true}
            State={[
              { key: 'day', value: 'день' },
              { key: 'week', value: 'нед.' },
              { key: 'month', value: 'мес.' },
              { key: 'year', value: 'год' },
              { key: 'quarter', value: 'квартал' }
            ]}
            KeyField="key"
            ValueField="value"
          />
        </Group>
      </Group>
    </Group>
  </Group>

Свойства​

Примеры​

Свойства

Примеры