範圍滑桿 React 元件

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

範圍滑桿元件

包含以下元件

Range

範圍屬性

名稱	類型	預設值	說明
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'
component	字串	'div'	元件的 HTML 元素
defaultValue	任意		範圍值，適用於非受控元件
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.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  BlockTitle,
  BlockHeader,
  List,
  ListItem,
  Range,
} from 'konsta/react';

export default function RangeSliderPage() {
  const [volume, setVolume] = useState(50);
  const [price, setPrice] = useState(150);
  const [red, setRed] = useState(100);
  const [green, setGreen] = useState(50);
  const [blue, setBlue] = useState(75);
  return (
    <Page>
      <Navbar
        title="Range Slider"
        />

      <BlockTitle>Volume: {volume}</BlockTitle>
      <BlockHeader>From 0 to 100 with step 10</BlockHeader>
      <List strong insetMaterial outlineIos>
        <ListItem
          innerClassName="flex space-x-4 rtl:space-x-reverse"
          innerChildren={
            <>
              <span>0</span>
              <Range
                value={volume}
                step={10}
                onChange={(e) => setVolume(e.target.value)}
              />
              <span>100</span>
            </>
          }
        />
      </List>

      <BlockTitle>Price: ${price}</BlockTitle>
      <BlockHeader>From 0 to 1000 with step 1</BlockHeader>
      <List strong insetMaterial outlineIos>
        <ListItem
          innerClassName="flex space-x-4 rtl:space-x-reverse"
          innerChildren={
            <>
              <span>$0</span>
              <Range
                value={price}
                step={1}
                min={0}
                max={1000}
                onChange={(e) => setPrice(e.target.value)}
              />
              <span>$1000</span>
            </>
          }
        />
      </List>

      <BlockTitle>
        Color: rgb({red}, {green}, {blue})
      </BlockTitle>
      <List strong insetMaterial outlineIos>
        <ListItem
          innerChildren={
            <Range
              className="k-color-brand-red"
              value={red}
              step={1}
              min={0}
              max={255}
              onChange={(e) => setRed(e.target.value)}
            />
          }
        />
        <ListItem
          innerChildren={
            <Range
              className="k-color-brand-green"
              value={green}
              step={1}
              min={0}
              max={255}
              onChange={(e) => setGreen(e.target.value)}
            />
          }
        />
        <ListItem
          innerChildren={
            <Range
              className="k-color-brand-blue"
              value={blue}
              step={1}
              min={0}
              max={255}
              onChange={(e) => setBlue(e.target.value)}
            />
          }
        />
      </List>
    </Page>
  );
}