Range Slider React Component

Range Slider Components
Range Props
Examples

Range Slider Components

There are following components included:

Range

Range Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
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'
component	string	'div'	Component's HTML Element
defaultValue	any		Range value, in case of uncontrolled component
disabled	boolean	false	Defines whether the range input is disabled
inputId	string		Range input id attribute
max	number	100	Range max value
min	number	0	Range min value
name	string		Range input name
readOnly	boolean	false	Defines whether the range input is readonly
step	number	1	Range step
value	any		Range value
onBlur	function(e)		`blur` event handler
onChange	function(e)		`change` event handler
onFocus	function(e)		`focus` event handler
onInput	function(e)		`input` event handler

Examples

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>
  );
}