レンジスライダー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	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>