There are following components included:
Range
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 |
Name | Type | Description |
---|---|---|
blur | function(e) |
|
change | function(e) |
|
focus | function(e) |
|
input | function(e) |
|
<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>