Слайдер

Слайдер используется для выбора значения с помощью одного или нескольких ползунков.

Документация API Спецификация

Слайдер для выбора одного значения

Для выбора одного значения из диапазона используется контрол Controls/slider:Base.

Текущее значение слайдера устанавливается в опции value. Оно должно находиться в диапазоне [minValue..maxValue]. Чтобы управлять состоянием слайдера из кода, с помощью директивы bind свяжите значение опции value со свойством контрола.

<Controls.slider:Base 
    bind:value="{{_value}}"
    minValue="{{10}}" 
    maxValue="{{100}}"/>

Диапазон выбора значения

Минимальное значение шкалы слайдера устанавливается в опции minValue.

Максимальное значение шкалы слайдера устанавливается в опции maxValue.

<Controls.slider:Base 
    minValue="{{10}}" 
    maxValue="{{100}}" 
    bind:value="_value"/>

Заливка слайдера

Для заливки интервалов слайдера выбранным цветом в опции intervals настройте поля:

• start — начало интервала в процентах;
• width — длину интервала в процентах;
• color — цвет интервала.

<Controls.slider:Base minValue="{{0}}" maxValue="{{100}}">
   <ws:intervals>
      <ws:Array>
         <ws:Object
            color="primary"
            start="{{0}}"
            end="{{10}}"/>
         <ws:Object
            color="danger"
            start="{{30}}"
            end="{{70}}"/>
      </ws:Array>
   </ws:intervals>
</Controls.slider:Base>

Для визуального выделения коротких интервалов на шкале с большим выбором значений используется шаблон intervalTemplate.

В данном примере без указания шаблона интервал не отобразится на слайдере из-за маленьких значений, поэтому указываем минимальную ширину в 5%.

_intervals = [
   {
      start: 100,
      end: 101,
      color: 'primary'
   }, {
      start: 510,
      end: 550,
      color: 'danger'
   }
];
_getInterval(interval) {
   if(interval.width < 5){
      interval.width = 5;
   }
   return interval;
}

<Controls.slider:Base
      maxValue="{{1000}}"
      minValue="{{0}}"
      bind:value="_value"
      intervals="{{_intervals}}">
   <ws:intervalTemplate>
      <ws:partial template="Controls/slider:IntervalTemplate"
                  interval="{{_getInterval(intervalTemplate.interval)}}" scope="{{intervalTemplate}}"/>
      </ws:intervalTemplate>
</Controls.slider:Base>

Слайдер для выбора диапазона

Для выбора диапазона значений используется контрол Controls/slider:Range.

Управление текущими значениями слайдера производится с помощью двух опций:

• startValue - текущее начальное значение слайдера;
• endValue - текущее конечное значение слайдера.

<Controls.slider:Range 
    bind:startValue="_startValue"
    bind:endValue="_endValue"
    minValue="{{10}}" 
    maxValue="{{100}}"/>

Значения должны находиться в диапазоне [minValue..maxValue]. Чтобы управлять состоянием слайдера из кода, с помощью директивы bind свяжите значение опций startValue и endValue со свойством контрола.

Диапазон выбора значения

Минимальное значение шкалы слайдера устанавливается в опции minValue.

Максимальное значение шкалы слайдера устанавливается в опции maxValue.

<Controls.slider:Range 
    bind:startValue="_startValue"
    bind:endValue="_endValue"
    minValue="{{10}}" 
    maxValue="{{100}}"/>

Конфигурация элементов слайдера

Конфигурация элементов слайдера настраивается в интерфейсе Controls/slider:ISlider.

Граница вокруг контрола

Для отображения границы вокруг контрола, передайте значение true в опцию borderVisible.

<Controls.slider:Base 
    borderVisible="{{true}}" 
    maxValue="{{100}}" 
    minValue="{{0}}" 
    bind:value="_value"/>

Ориентация слайдера

Ориентация слайдера устанавливается в опции direction, которая принимает значения:

• horizontal - горизонтальное расположение слайдера;
• vertical - вертикальное расположение слайдера.

<Controls.slider:Base 
    direction="vertical" 
    maxValue="{{100}}" 
    minValue="{{0}}" 
    bind:value="_value"
    attr:class="mySliderBase_height"/>

Десятичные числа

Для отображения десятичных чисел на слайдере, укажите количество знаков после запятой в опции precision.

<Controls.slider:Base 
    precision="{{2}}" 
    maxValue="{{100}}" 
    minValue="{{0}}" 
    bind:value="_value"/>

Маркер

Чтобы скрыть маркер передайте значение false в опцию markerVisibility.

<Controls.slider:Base
        maxValue="{{100}}"
        minValue="{{0}}"
        markerVisibility="false"
/>

Размер ползунка

Размер ползунка слайдера устанавливается в опции size.

<Controls.slider:Base
        maxValue="{{100}}"
        minValue="{{0}}"
        bind:value="_value"
        size="s"
/>

Настройка шкалы слайдера

Размер шрифта шкалы устанавливается в опции scaleFontSize.

<Controls.slider:Base
        maxValue="{{100}}"
        minValue="{{0}}"
        bind:value="_value"
        scaleStep="{{10}}"
        scaleFontSize="l"
/>

Шаг шкалы слайдера устанавливается в опции scaleStep.

<Controls.slider:Base
        maxValue="{{100}}"
        minValue="{{0}}"
        bind:value="_value"
        scaleStep="{{10}}"
        scaleFontSize="l"
/>

Настройка подсказки

Подсказка показывает текущее значение слайдера из аргумента value.

Форматирование

Форматирование подсказки настраивается с помощью функции tooltipFormatter.

<Controls.slider:Base
   maxValue="{{100}}"
   minValue="{{0}}"
   bind:value="_value"
   tooltipFormatter="{{_tooltipFormatter}}"/>

protected _tooltipFormatter = (value: number): string => {
    return '$' + value;
};

Размер шрифта

Размер шрифта подсказки устанавливается в опции tooltipFontSize.

<Controls.slider:Base 
    tooltipVisible="{{true}}" 
    tooltipFontSize="3xl"
    maxValue="{{100}}" 
    minValue="{{0}}" 
    bind:value="_value"/>

Расположение

По умолчанию подсказка располагается сверху. Чтобы отобразить подсказу снизу шкалы, передайте значение bottom в опцию tooltipPosition.

<Controls.slider:Base 
    tooltipVisible="{{true}}" 
    tooltipPosition="bottom"
    maxValue="{{100}}" 
    minValue="{{0}}" 
    bind:value="_value"/>

Отображение по наведению

Чтобы подсказка отображалась при наведении на шкалу, передайте значение true в опцию tooltipVisible.

<Controls.slider:Base 
    tooltipVisible="{{true}}" 
    maxValue="{{100}}" 
    minValue="{{0}}" 
    bind:value="_value"/>