Range Slider Svelte Component

Range Slider Components
Range Props
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'
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
onBlur	function(e)		`blur` event handler
onChange	function(e)		`change` event handler
onFocus	function(e)		`focus` event handler
onInput	function(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 rtl:space-x-reverse">
      <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 rtl:space-x-reverse">
      <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>