Slider

Slider is a simple slider with option to select with range.

How to use

import React from 'react';
import {Slider} from '@gyri/native-ui-components';

const MyComponent = () => {
  const [lowValue, setLowValue] = React.useState(18);
  
  return (
    <Slider
      disableRange={true}
      min={18}
      max={99}
      lowValue={lowValue}
      step={1}
      thumbSize={36}
      thumbColor={'#fff'}
      activeColor={'#FE6600'}
      updateValue={setLowValue}
      railHeight={5}
    />
  );
};

export default MyComponent;

Props

#	Name	Data type	Default value	Values	Description
1	updateValue	function	console.log		Update low and high value callback. If disableRange is true then only update lowValue
2	disableRange	bool	true		Slider with range.
3	min	number	0		Min value of slider.
4	max	number	100		Max value of slider.
5	step	number	1		Step for slider.
6	lowValue	number			Lower side value of slider. if disableRange is true, then this value is used.
7	highValue	number			Higher value for slider.
8	thumbSize	number	16		Thumb (knob) size for slider.
9	thumbColor	string	'#FE6600'		Thumb color.
10	activeColor	string	'#FE6600'		Active color for rail.
11	railBgColor	string	'#E4E4E4'		Rail background color.
12	railHeight	string	4		Height for rail.
13	style	object			Custom style object
14	className	string	''		It defined nativewind style classes.

For more details https://github.com/githuboftigran/rn-range-slider