Range Slider React Component

Range Slider Components

There are following components included:

  • Range

Range Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.thumbBgIosstring'range-thumb:bg-white'

Range thumb bg color in iOS theme

colors.thumbBgMaterialstring'range-thumb:bg-primary'

Range thumb bg color in Material theme

colors.valueBgstring'bg-primary'

Range bg color

componentstring'div'

Component's HTML Element

defaultValueany

Range value, in case of uncontrolled component

disabledbooleanfalse

Defines whether the range input is disabled

inputIdstring

Range input id attribute

maxnumber100

Range max value

minnumber0

Range min value

namestring

Range input name

readOnlybooleanfalse

Defines whether the range input is readonly

stepnumber1

Range step

valueany

Range value

onBlurfunction(e)

blur event handler

onChangefunction(e)

change event handler

onFocusfunction(e)

focus event handler

Examples

RangeSlider.jsx
import React, { useState } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
BlockTitle,
BlockHeader,
List,
ListItem,
Range,
} from 'tailwind-mobile/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>
<ListItem
innerClassName="flex space-x-4"
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>
<ListItem
innerClassName="flex space-x-4"
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>
<ListItem
innerChildren={
<Range
colors={{
valueBg: 'bg-red-500',
thumbBgMaterial: 'range-thumb:bg-red-500',
}}
value={red}
step={1}
min={0}
max={255}
onChange={(e) => setRed(e.target.value)}
/>
}
/>
<ListItem
innerChildren={
<Range
colors={{
valueBg: 'bg-green-500',
thumbBgMaterial: 'range-thumb:bg-green-500',
}}
value={green}
step={1}
min={0}
max={255}
onChange={(e) => setGreen(e.target.value)}
/>
}
/>
<ListItem
innerChildren={
<Range
colors={{
valueBg: 'bg-blue-500',
thumbBgMaterial: 'range-thumb:bg-blue-500',
}}
value={blue}
step={1}
min={0}
max={255}
onChange={(e) => setBlue(e.target.value)}
/>
}
/>
</List>
</Page>
);
}
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.