Навігація

Макет повзунка діапазону

Один діапазон

<!-- Елемент повзунка діапазону -->
<div class="range-slider">
  <!-- введення діапазону-->
  <input type="range" min="0" max="100" step="1" value="10" />
</div>

Подвійний діапазон

<!-- Елемент повзунка діапазону -->
<div class="range-slider"></div>

Кольори повзунка діапазону

<!-- червоний повзунок діапазону -->
<div class="range-slider color-red">...</div>

<!-- оранжевий повзунок діапазону  -->
<div class="range-slider color-orange">...</div>

Методи застосунку Повзунок діапазону

Параметри повзунка діапазону

var range = app.range.create({
  el: '.range-slider',
  on: {
    change: function () {
      console.log('Range Slider value changed')
    }
  }
})

Методи та властивості повзунка діапазону

var range = app.range.create({ /* parameters */ })

Властивості

Методи

Події повзунка діапазону

Події DOM

Події екземплярів застосунку та повзунка діапазону

Автоматична ініціалізація повзунка діапазону

<!-- додати клас range-slider-init -->
<div class="range-slider range-slider-init">
  <input type="range" min="0" max="100" step="1" value="10" />
</div>

var range = app.range.get('.range-slider');

if (range.value > 50) {
  // щось зробити
}

<!--Параметри min, max, step, value будуть встановлені для відповідних вхідних атрибутів -->
<div class="range-slider range-slider-init">
  <input type="range" min="0" max="100" step="1" value="10" />
	</div>

<!-- параметри встановлені через data- attributes -->
<div
  class="range-slider range-slider-init"
  data-min="0"
  data-max="100"
  data-step="10"
  data-label="true"
  data-value="50"
	></div>

<!-- параметри  встановлені через data- attributes -->
<div
  class="range-slider range-slider-init"
  data-dual="true"
  data-min="0"
  data-max="100"
  data-step="10"
  data-label="true"
  data-value-left="30"
  data-value-right="60"
></div>

Змінні CSS

:root {
  /*
  --t4-range-bar-active-bg-color: var(--t4-theme-color);
  --t4-range-scale-bg-color: var(--t4-range-bar-bg-color);
  --t4-range-scale-substep-bg-color: var(--t4-range-bar-bg-color);
  */
  --t4-range-scale-step-height: 5px;
  --t4-range-scale-substep-width: 1px;
  --t4-range-scale-substep-height: 4px;
  --t4-range-bar-bg-color: rgba(0, 0, 0, 0.2);
}
:root .dark,
:root.dark {
  --t4-range-bar-bg-color: rgba(255, 255, 255, 0.2);
}
.ios {
  --t4-range-size: 28px;
  --t4-range-bar-size: 4px;
  --t4-range-bar-border-radius: 2px;
  --t4-range-knob-size: 28px;
  --t4-range-knob-color: #fff;
  --t4-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --t4-range-label-size: 24px;
  --t4-range-label-text-color: #000;
  --t4-range-label-bg-color: #fff;
  --t4-range-label-font-size: 12px;
  --t4-range-label-font-weight: 500;
  --t4-range-label-border-radius: 5px;
  --t4-range-label-padding: 0px 2px;
  --t4-range-scale-text-color: #666;
  --t4-range-scale-step-width: 1px;
  --t4-range-scale-font-size: 12px;
  --t4-range-scale-font-weight: 400;
  --t4-range-scale-label-offset: 4px;
}
.md {
  --t4-range-size: 20px;
  --t4-range-bar-size: 2px;
  --t4-range-bar-border-radius: 0px;
  --t4-range-knob-size: 12px;
  --t4-range-knob-box-shadow: none;
  --t4-range-label-size: 26px;
  --t4-range-label-font-weight: normal;
  --t4-range-label-font-size: 10px;
  --t4-range-label-border-radius: 50%;
  --t4-range-label-padding: 0px;
  --t4-range-scale-step-width: 2px;
  --t4-range-scale-font-size: 12px;
  --t4-range-scale-font-weight: 400;
  --t4-range-scale-label-offset: 4px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --t4-range-knob-color: var(--t4-theme-color);
  --t4-range-label-text-color: var(--t4-md-on-primary);
  --t4-range-label-bg-color: var(--t4-theme-color);
  --t4-range-scale-text-color: var(--t4-md-on-surface-variant);
}

Приклади

Приклади
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Range Slider</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Volume</div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li>
            <div>
              <i class="icon t4-icons if-not-md" style="width: 28px">speaker_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">volume_mute</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init">
                <input type="range" min="0" max="100" step="1" value="10" />
              </div>
            </div>
            <div>
              <i class="icon t4-icons if-not-md" style="width: 28px">speaker_3_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">volume_up</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Brightness</div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li>
            <div>
              <i class="icon t4-icons if-not-md" style="width: 28px">sun_min</i>
              <i class="icon material-icons md-only" style="width: 24px">brightness_low</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init color-orange" data-label="true">
                <input type="range" min="0" max="100" step="1" value="50" />
              </div>
            </div>
            <div>
              <i class="icon t4-icons if-not-md" style="width: 28px">sun_max_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">brightness_high</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title display-flex justify-content-space-between">
        Price Filter <span class="price-value">$${priceMin} - $${priceMax}</span>
      </div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li class="item-row">
            <div>
              <i class="icon t4-icons if-not-md" style="width: 28px">money_dollar_circle</i>
              <i class="icon material-icons md-only" style="width: 24px">attach_money</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init color-green" @range:change=${onPriceChange} data-label="true"
                data-dual="true" data-min="0" data-max="500" data-step="1" data-value-left="200" data-value-right="400">
              </div>
            </div>
            <div>
              <i class="icon t4-icons if-not-md" style="width: 28px">money_dollar_circle_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">monetization_on</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">With Scale</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="range-slider range-slider-init" data-min="0" data-max="100" data-label="true" data-step="5"
          data-value="25" data-scale="true" data-scale-steps="5" data-scale-sub-steps="4"></div>
      </div>
      <div class="block-title">Vertical</div>
      <div class="block block-strong-ios block-outline-ios display-flex justify-content-center">
        <div class="range-slider range-slider-init margin-right" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="25" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-horizontal" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="50" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-horizontal" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="75" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-left" data-dual="true" data-vertical="true" data-min="0"
          data-max="100" data-label="true" data-step="1" data-value-left="25" data-value-right="75"
          style="height: 160px"></div>
      </div>
      <div class="block-title">Vertical Reversed</div>
      <div class="block block-strong-ios block-outline-ios display-flex justify-content-center">
        <div class="range-slider range-slider-init color-red margin-right" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="25"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-horizontal" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="50"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-horizontal" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="75"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-left" data-dual="true" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value-left="25"
          data-value-right="75" style="height: 160px"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $el, $update }) => {
    let priceMin = 200;
    let priceMax = 400;

    const onPriceChange = (e) => {
      const range = $t4.range.get(e.target);
      priceMin = range.value[0];
      priceMax = range.value[1];
      $update();
    };

    return $render;
  };
</script>