范围滑块 React 组件

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

范围滑块组件

包含以下组件

范围

范围属性

名称	类型	默认值	描述
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	function(e)		`blur` 事件处理程序
onChange	function(e)		`change` 事件处理程序
onFocus	function(e)		`focus` 事件处理程序
onInput	function(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>
  );
}