🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Range Slider Vue Component

Range Slider Components

There are following components included:

  • Range

Range Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.thumbBgIosstring'range-thumb:bg-white'
colors.thumbBgMaterialstring'range-thumb:bg-md-light-primary dark:range-thumb:bg-md-dark-primary'
colors.valueBgIosstring'bg-primary'
colors.valueBgMaterialstring'bg-md-light-primary dark:bg-md-dark-primary'
componentstring'div'

Component's HTML Element

disabledbooleanfalse

Defines whether the range input is disabled

inputIdstring

Range input id attribute

maxnumber100

Range max value

minnumber0

Range min value

namestring

Range input name

readonlybooleanfalse

Defines whether the range input is readonly

stepnumber1

Range step

valueany

Range value

Range Events

NameTypeDescription
blurfunction(e)

blur event handler

changefunction(e)

change event handler

focusfunction(e)

focus event handler

inputfunction(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 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>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.