bukatchuk ui

Элементы

Ползунок

Выбор значения из диапазона на <input type="range">: своя дорожка и бегунок, значение в <output>, шаги, подписи вместо чисел.

slider с версии 0.1.0 со скриптом

Примеры

Длительность встречи
45 мин

Шаг — 15 минут. По истечении времени организатор получит напоминание.

<form action="#" method="post">
  <div class="slider" data-ui-slider data-ui-unit=" мин">
    <div class="slider__head">
      <label class="slider__label" for="sl-dur">Длительность встречи</label>
      <output class="slider__value" for="sl-dur">45 мин</output>
    </div>
    <input class="slider__input" type="range" id="sl-dur" name="duration" min="15" max="120" step="15" value="45" aria-describedby="sl-dur-h">
    <div class="slider__scale" aria-hidden="true"><span>15 мин</span><span>120 мин</span></div>
    <p class="slider__hint" id="sl-dur-h">Шаг — 15 минут. По истечении времени организатор получит напоминание.</p>
  </div>
</form>
Подписи вместо чисел
Среднее 
<div class="slider" data-ui-slider data-ui-labels="Низкое,Среднее,Высокое,Максимальное">
  <div class="slider__head">
    <label class="slider__label" for="sl-qual">Качество видео</label>
    <output class="slider__value" for="sl-qual">Среднее</output>
  </div>
  <input class="slider__input" type="range" id="sl-qual" name="quality" min="0" max="3" step="1" value="1">
</div>
Громкость и отключённое состояние
70%
40% 
<div class="slider" data-ui-slider data-ui-unit="%">
  <div class="slider__head">
    <label class="slider__label" for="sl-vol">Громкость</label>
    <output class="slider__value" for="sl-vol">70%</output>
  </div>
  <input class="slider__input" type="range" id="sl-vol" name="volume" min="0" max="100" step="5" value="70">
</div>
<div class="slider" data-ui-slider data-ui-unit="%">
  <div class="slider__head">
    <label class="slider__label" for="sl-dis">Шумоподавление</label>
    <output class="slider__value" for="sl-dis">40%</output>
  </div>
  <input class="slider__input" type="range" id="sl-dis" name="denoise" min="0" max="100" step="10" value="40" disabled>
</div>

Установка

bukatchuk-ui add slider

Вместе с компонентом установятся: tokens, fonts, base, core.

Файлы

ФайлНазначение
slider.cssстили
slider.jsскрипт
example.htmlобразец разметки, в проект не копируется
slider.jinja.htmlвставка для Jinja

Клавиши

КлавишаДействие
← ↓уменьшить на шаг
→ ↑увеличить на шаг
PageDown / PageUpкрупный шаг
Home / Endминимум и максимум

Макрос для Jinja

{#- Ползунок. unit — единица после числа; labels — список подписей шагов; scale=True выводит
    крайние значения под дорожкой. Без скрипта значение в <output> остаётся начальным. -#}
{% macro slider(name, label, min=0, max=100, step=1, value=None, unit='', labels=None, scale=False, hint=None, disabled=False, id=None) -%}
{%- set sid = id or ('sl-' ~ name) -%}
{%- set cur = value if value is not none else min -%}
<div class="slider" data-ui-slider{% if unit %} data-ui-unit="{{ unit }}"{% endif %}{% if labels %} data-ui-labels="{{ labels|join(',') }}"{% endif %}>
  <div class="slider__head">
    <label class="slider__label" for="{{ sid }}">{{ label }}</label>
    <output class="slider__value" for="{{ sid }}">{% if labels %}{{ labels[((cur - min) // step)|int] }}{% else %}{{ cur }}{{ unit }}{% endif %}</output>
  </div>
  <input class="slider__input" type="range" id="{{ sid }}" name="{{ name }}" min="{{ min }}" max="{{ max }}" step="{{ step }}" value="{{ cur }}"{% if hint %} aria-describedby="{{ sid }}-h"{% endif %}{% if disabled %} disabled{% endif %}>
  {%- if scale %}
  <div class="slider__scale" aria-hidden="true"><span>{{ labels[0] if labels else (min ~ unit) }}</span><span>{{ labels[-1] if labels else (max ~ unit) }}</span></div>
  {%- endif %}
  {%- if hint %}
  <p class="slider__hint" id="{{ sid }}-h">{{ hint }}</p>
  {%- endif %}
</div>
{%- endmacro %}