React Native Product Sliders

A customizable slider and range slider component for React Native with Material-UI like features.

Screenshots

Features

• Single slider and range slider variants
• Customizable thumb, track, and marker styles
• Step-based sliding
• RTL support
• Custom labels and markers
• Touch-friendly interaction area
• Callbacks for sliding events
• TypeScript support

Installation

npm install react-native-product-sliders
# or
yarn add react-native-product-sliders

Components

Slider

A single thumb slider component.

Props

Prop	Type	Default	Description
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step value
value	number	min	Current value
disabled	boolean	false	Disable interaction
thumbStyle	object	{}	Style for the thumb
trackStyle	object	{}	Style for the base track
selectedTrackStyle	object	{}	Style for the selected track
markerStyle	object	{}	Style for markers
showMarkers	boolean	false	Show step markers
labelPosition	"top" | "bottom"	"top"	Position of the label
labelWidth	number | "auto"	"auto"	Width of the label
labelLeftAdjustment	number	0	Left adjustment for the label
onValueChange	(value: number) => void	-	Callback when value changes
onSlidingStart	(value: number) => void	-	Callback when sliding starts
onSlidingComplete	(value: number) => void	-	Callback when sliding completes
renderLabel	(value: number) => React.ReactNode	-	Custom label renderer
renderMarker	(value: number) => React.ReactNode	-	Custom marker renderer

RangeSlider

A dual-thumb range slider component.

Props

Prop	Type	Default	Description
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step value
minRange	number	1	Minimum range between thumbs
lowValue	number	min	Current low value
highValue	number	max	Current high value
disabled	boolean	false	Disable interaction
thumbStyle	object	{}	Style for the thumbs
trackStyle	object	{}	Style for the base track
selectedTrackStyle	object	{}	Style for the selected track
markerStyle	object	{}	Style for markers
showMarkers	boolean	false	Show step markers
onRangeChange	(low: number, high: number) => void	-	Callback when range changes
onSlidingStart	(low: number, high: number) => void	-	Callback when sliding starts
onSlidingComplete	(low: number, high: number) => void	-	Callback when sliding completes
renderLabel	(value: number) => React.ReactNode	-	Custom label renderer
renderMarker	(value: number) => React.ReactNode	-	Custom marker renderer

Usage

Basic Slider

import { Slider } from 'react-native-product-sliders';

<Slider min={0} max={100} value={50} onValueChange={value => console.log(value)} />;

Range Slider

import { RangeSlider } from 'react-native-product-sliders';

<RangeSlider
  min={0}
  max={100}
  lowValue={20}
  highValue={80}
  onRangeChange={(low, high) => console.log(low, high)}
/>;

Custom Styling

<Slider
  min={0}
  max={100}
  value={50}
  thumbStyle={{ backgroundColor: 'red' }}
  trackStyle={{ backgroundColor: 'lightgray' }}
  selectedTrackStyle={{ backgroundColor: 'green' }}
/>

Custom Labels and Markers

<Slider
  min={0}
  max={100}
  step={10}
  showMarkers
  renderLabel={value => <Text>{value}</Text>}
  renderMarker={value => <Text style={{ fontSize: 10 }}>{value}</Text>}
/>

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/amazing-feature)
3. Commit your Changes (git commit -m 'Add some amazing feature')
4. Push to the Branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © KGG Dev

Contact

KGG Dev - @kgg.dev.company - fullstackdev2024@gmail.com

Project Link: https://github.com/gitfullstacker/react-native-product-sliders