範圍滑桿 Svelte 組件

範圍滑桿組件
範圍屬性
範例

範圍滑桿組件

包含以下組件

範圍

範圍屬性

名稱	類型	預設值	描述
colors	物件		具有 Tailwind CSS 顏色類別的物件
colors.thumbBgIos	字串	'range-thumb:bg-white'
colors.thumbBgMaterial	字串	'range-thumb:bg-md-light-primary dark:range-thumb:bg-md-dark-primary'
colors.valueBgIos	字串	'bg-primary'
colors.valueBgMaterial	字串	'bg-md-light-primary dark:bg-md-dark-primary'
disabled	布林值	false	定義是否停用範圍輸入
inputId	字串		範圍輸入的 id 屬性
max	數字	100	範圍最大值
min	數字	0	範圍最小值
name	字串		範圍輸入名稱
readonly	布林值	false	定義範圍輸入是否為唯讀
step	數字	1	範圍步階
value	任意		範圍值
onBlur	函式(e)		`blur` 事件處理器
onChange	函式(e)		`change` 事件處理器
onFocus	函式(e)		`focus` 事件處理器
onInput	函式(e)		`input` 事件處理器

範例

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>