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'
colors.thumbBgMaterial	string	'range-thumb:bg-md-light-primary dark:range-thumb:bg-md-dark-primary'
colors.valueBgIos	string	'bg-primary'
colors.valueBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
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 strong inset-material outline-ios>
      <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 strong inset-material outline-ios>
      <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 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>