范围滑块 Svelte 组件

范围滑块组件
范围属性
示例

范围滑块组件

以下组件包含在内

范围

范围属性

名称	类型	默认值	描述
colors	object		具有 Tailwind CSS 颜色类别的对象
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	定义范围输入是否禁用
inputId	string		范围输入 id 属性
max	number	100	范围最大值
min	number	0	范围最小值
name	string		范围输入名称
readonly	boolean	false	定义范围输入是否只读
step	number	1	范围步长
value	any		范围值
onBlur	function(e)		`blur` 事件处理程序
onChange	function(e)		`change` 事件处理程序
onFocus	function(e)		`focus` 事件处理程序
onInput	function(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>