レンジスライダー Vue コンポーネント

レンジスライダーコンポーネント
レンジプロパティ
レンジイベント
例

レンジスライダーコンポーネント

以下のコンポーネントが含まれています。

レンジ

レンジプロパティ

名前	型	デフォルト	説明
colors	オブジェクト		Tailwind CSSカラークラスを持つオブジェクト
colors.thumbBgIos	文字列	`range-thumb:bg-white`
colors.thumbBgMaterial	文字列	`range-thumb:bg-md-light-primary dark:range-thumb:bg-md-dark-primary`
colors.valueBgIos	文字列	`bg-primary`
colors.valueBgMaterial	文字列	`bg-md-light-primary dark:bg-md-dark-primary`
component	文字列	`div`	コンポーネントのHTML要素
disabled	ブール値	false	レンジ入力の無効化を定義します。
inputId	文字列		レンジ入力のid属性
max	数値	100	レンジの最大値
min	数値	0	レンジの最小値
name	文字列		レンジ入力の名前
readonly	ブール値	false	レンジ入力が読み取り専用かどうかを定義します。
step	数値	1	レンジのステップ
value	任意		レンジの値

レンジイベント

名前	型	説明
blur	function(e)	`blur`イベントハンドラ
change	function(e)	`change`イベントハンドラ
focus	function(e)	`focus`イベントハンドラ
input	function(e)	`input`イベントハンドラ

例

RangeSlider.vue

<template>
  <k-page>
    <k-navbar title="Range Slider" />

    <k-block-title>Volume: {{ volume }}</k-block-title>
    <k-block-header>From 0 to 100 with step 10</k-block-header>
    <k-list strong inset-material outline-ios>
      <k-list-item inner-class="flex space-x-4 rtl:space-x-reverse">
        <template #inner>
          <span>0</span>
          <k-range
            :value="volume"
            :step="10"
            @input="(e) => (volume = parseInt(e.target.value, 10))"
          />
          <span>100</span>
        </template>
      </k-list-item>
    </k-list>

    <k-block-title>Price: ${{ price }}</k-block-title>
    <k-block-header>From 0 to 1000 with step 1</k-block-header>
    <k-list strong inset-material outline-ios>
      <k-list-item inner-class="flex space-x-4 rtl:space-x-reverse">
        <template #inner>
          <span>$0</span>
          <k-range
            :value="price"
            :step="1"
            :min="0"
            :max="1000"
            @input="(e) => (price = parseInt(e.target.value, 10))"
          />
          <span>$1000</span>
        </template>
      </k-list-item>
    </k-list>

    <k-block-title>
      Color: rgb({{ red }}, {{ green }}, {{ blue }})
    </k-block-title>
    <k-list strong inset-material outline-ios>
      <k-list-item>
        <template #inner>
          <k-range
            class="k-color-brand-red"
            :value="red"
            :step="1"
            :min="0"
            :max="255"
            @input="(e) => (red = parseInt(e.target.value, 10))"
          />
        </template>
      </k-list-item>
      <k-list-item>
        <template #inner>
          <k-range
            class="k-color-brand-green"
            :value="green"
            :step="1"
            :min="0"
            :max="255"
            @input="(e) => (green = parseInt(e.target.value, 10))"
          />
        </template>
      </k-list-item>
      <k-list-item>
        <template #inner>
          <k-range
            class="k-color-brand-blue"
            :value="blue"
            :step="1"
            :min="0"
            :max="255"
            @input="(e) => (blue = parseInt(e.target.value, 10))"
          />
        </template>
      </k-list-item>
    </k-list>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlockTitle,
    kBlockHeader,
    kList,
    kListItem,
    kRange,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlockTitle,
      kBlockHeader,
      kList,
      kListItem,
      kRange,
    },
    setup() {
      const volume = ref(50);
      const price = ref(150);
      const red = ref(100);
      const green = ref(50);
      const blue = ref(75);

      return {
        volume,
        price,
        red,
        green,
        blue,
      };
    },
  };
</script>