minExample

import React, {useCallback, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Slider from 'rn-range-slider';
import {moderateScale, SCREEN_WIDTH} from '../constants/scaling';
import colors from '../constants/theme';

const Thumb = () => {
  return <View style={{width: 20, height: 20, backgroundColor: 'green'}} />;
};

const Rail = () => {
  return (
    <View
      style={{
        height: 5,
        width: '100%',
        backgroundColor: 'yellow',
      }}
    />
  );
};

const RailSelected = () => {
  return <View style={{backgroundColor: 'red'}} />;
};

const Label = () => {
  return (
    <View>
      <Text>ia ma label</Text>
    </View>
  );
};

const Notch = () => {
  return <View style={{backgroundColor: 'blue', width: 6, height: 6}} />;
};
const CustomRangeSlider = () => {
  const [low, setLow] = useState(0);
  const [high, setHigh] = useState(100);
  const renderThumb = useCallback(() => <Thumb />, []);
  const renderRail = useCallback(() => <Rail />, []);
  const renderRailSelected = useCallback(() => <RailSelected />, []);
  const renderLabel = useCallback(value => <Label text={value} />, []);
  const renderNotch = useCallback(() => <Notch />, []);
  const handleValueChange = useCallback((low, high) => {
    console.log(low, high);
    setLow(low);
    setHigh(high);
  }, []);
  return (
    <Slider
      style={styles.slider}
      min={30}
      max={100}
      step={1}
      renderThumb={renderThumb}
      renderRail={renderRail}
      renderRailSelected={renderRailSelected}
      renderLabel={renderLabel}
      renderNotch={renderNotch}
      onValueChanged={handleValueChange}
    />
  );
};

export default CustomRangeSlider;

const styles = StyleSheet.create({
  slider: {
    width: SCREEN_WIDTH - moderateScale(16),
    marginTop: moderateScale(5),
    backgroundColor: colors.white,
    justifyContent: 'center',
    height: moderateScale(45),
  },
});