范围滑块 Vue 组件

范围滑块组件
范围属性
范围事件
示例

范围滑块组件

包含以下组件

范围

范围属性

名称	类型	默认值	描述
颜色	对象		包含 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'
组件	字符串	'div'	组件的 HTML 元素
禁用	布尔值	false	定义范围输入是否禁用
inputId	字符串		范围输入 id 属性
最大值	数字	100	范围最大值
最小值	数字	0	范围最小值
名称	字符串		范围输入名称
只读	布尔值	false	定义范围输入是否只读
步长	数字	1	范围步长
值	任意		范围值

范围事件

名称	类型	描述
模糊	函数(e)	`blur` 事件处理程序
改变	函数(e)	`change` 事件处理程序
焦点	函数(e)	`focus` 事件处理程序
输入	函数(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>