Range Slider Svelte 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'
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

onBlurfunction(e)

blur event handler

onChangefunction(e)

change event handler

onFocusfunction(e)

focus event handler

onInputfunction(e)

input event handler

Examples

RangeSlider.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
BlockTitle,
BlockHeader,
List,
ListItem,
Range,
} from 'konsta/svelte';
let volume = 50;
let price = 150;
let red = 100;
let green = 50;
let blue = 75;
</script>
<Page>
<Navbar title="Range Slider" />
<BlockTitle>Volume: {volume}</BlockTitle>
<BlockHeader>From 0 to 100 with step 10</BlockHeader>
<List strong insetMaterial outlineIos>
<ListItem innerClass="flex space-x-4">
<svelte:fragment slot="inner">
<span>0</span>
<Range
value={volume}
step={10}
onInput={(e) => (volume = e.target.value)}
/>
<span>100</span>
</svelte:fragment>
</ListItem>
</List>
<BlockTitle>Price: ${price}</BlockTitle>
<BlockHeader>From 0 to 1000 with step 1</BlockHeader>
<List strong insetMaterial outlineIos>
<ListItem innerClass="flex space-x-4">
<svelte:fragment slot="inner">
<span>$0</span>
<Range
value={price}
step={1}
min={0}
max={1000}
onInput={(e) => (price = e.target.value)}
/>
<span>$1000</span>
</svelte:fragment>
</ListItem>
</List>
<BlockTitle>
Color: rgb({red}, {green}, {blue})
</BlockTitle>
<List strong insetMaterial outlineIos>
<ListItem>
<Range
slot="inner"
class="k-color-brand-red"
value={red}
step={1}
min={0}
max={255}
onInput={(e) => (red = e.target.value)}
/></ListItem
>
<ListItem>
<Range
slot="inner"
class="k-color-brand-green"
value={green}
step={1}
min={0}
max={255}
onInput={(e) => (green = e.target.value)}
/></ListItem
>
<ListItem>
<Range
slot="inner"
class="k-color-brand-blue"
value={blue}
step={1}
min={0}
max={255}
onInput={(e) => (blue = e.target.value)}
/></ListItem
>
</List>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.