Range Slider Vue Component

Range Slider Components
Range Props
Range Events
Examples

Range Slider Components

There are following components included:

Range

Range Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.thumbBgIos	string	'range-thumb:bg-white'	Range thumb bg color in iOS theme
colors.thumbBgMaterial	string	'range-thumb:bg-primary'	Range thumb bg color in Material theme
colors.valueBg	string	'bg-primary'	Range bg color
component	string	'div'	Component's HTML Element
disabled	boolean	false	Defines whether the range input is disabled
inputId	string		Range input id attribute
max	number	100	Range max value
min	number	0	Range min value
name	string		Range input name
readonly	boolean	false	Defines whether the range input is readonly
step	number	1	Range step
value	any		Range value

Range Events

Name	Type	Description
blur	function(e)	`blur` event handler
change	function(e)	`change` event handler
focus	function(e)	`focus` event handler
input	function(e)	`input` event handler

Examples

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>
      <k-list-item inner-class="flex space-x-4">
        <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>
      <k-list-item inner-class="flex space-x-4">
        <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>
      <k-list-item>
        <template #inner>
          <k-range
            :colors="{
              valueBg: 'bg-red-500',
              thumbBgMaterial: 'range-thumb:bg-red-500',
            }"
            :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
            :colors="{
              valueBg: 'bg-green-500',
              thumbBgMaterial: 'range-thumb:bg-green-500',
            }"
            :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
            :colors="{
              valueBg: 'bg-blue-500',
              thumbBgMaterial: 'range-thumb:bg-blue-500',
            }"
            :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>