範圍滑桿 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	函式(e)	`blur` 事件處理函式
change	函式(e)	`change` 事件處理函式
focus	函式(e)	`focus` 事件處理函式
input	函式(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>