Слайдер
Слайдер используется для выбора значения с помощью одного или нескольких ползунков.
Слайдер для выбора одного значения
Для выбора одного значения из диапазона используется контрол 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"/>