Range

import {Range} from '@/ui'

const [range, setRange] = useState(0)

const handleRangeChange = (value: number) => {
	setRange(value)
}

return (			
	<Range
		onRangeChange={handleRangeChange}
		label='Select Range'
		feedback={true}
	/>
)

min?: number        // default = 0
max?: number        // default = 100
step?: number       // default = 1
clr1?: string       // range and thumbnail colour - default = '#f59e0b'
clr2?: string       // background colour - default = '#9e9e9e'
initial?: number    // initial range value - default = 0
vertical?: boolean  // vertical orientation - default = false
className?: string  // any Tailwind classes
onRangeChange: (number: number) => void | undefined // returns range value
label?: string				// add label content
labelStyles?: string		// label styles
feedback?: boolean			// add feedback message
feedbackMessage?: string	// feedback message content

<Range
	vertical={true}
	onRangeChange={handleRangeChange2}
	className=''
	label='Select Range'
	feedback={true}
/>>

import Range from '@/components/range'
import { round } from '@smitch/js-lib'
					
const [red, setRed] = useState(50)
const [green, setGreen] = useState(50)
const [blue, setBlue] = useState(50)
const [opacity, setOpacity] = useState(1)

const handleRedChange = (value: number) => {
	setRed(value)
}

const handleGreenChange = (value: number) => {
	setGreen(value)
}

const handleBlueChange = (value: number) => {
	setBlue(value)
}

const handleOpacityChange = (value: number) => {
	setOpacity(value)
}

const getRGBvalue = (value: number) => {
	return round((255 / 100) * value)
}
	
<Range
	onRangeChange={handleRedChange}
	clr1='red'
	initial={50}
	label='r'
/>

<Range
	onRangeChange={handleGreenChange}
	clr1='green'
	initial={50}
	label='g'
/>

<Range
	onRangeChange={handleBlueChange}
	clr1='blue'
	initial={50}
	label='b'
/>

<Range
	onRangeChange={handleOpacityChange}
	max={1}
	step={0.1}
	initial={1}
	clr1='black'
	label='a'
					/>

<p>
	rgba({getRGBvalue(red)},{getRGBvalue(green)},{getRGBvalue(blue)},{opacity})
</p>

<Range
	onRangeChange={handleAudioChange}
	max={1}
	step={0.1}
	initial={0.5}
	clr1='purple'
	label='Set Volume'
	feedback={true}
	feedbackMessage='Volume'
/>