cally/components/shared/PointsSlider.tsx

import { View, Text, Slider, TextField } from "react-native-ui-lib";
import React from "react";

const PointsSlider = (props: {
  points: number;
  setPoints(value: number): void;
  handleChange(value: string): void;
}) => {
  return (
    <View marginH-30 row spread>
      <View width={"80%"}>
        <Slider
          value={props.points}
          onValueChange={(value) => props.setPoints(value)}
          minimumValue={0}
          step={5}
          thumbTintColor="white"
          minimumTrackTintColor="#91d5ff"
          thumbStyle={{borderWidth: 3, borderColor: '#91d5ff'}}
          maximumValue={100}
        />
        <View row spread>
          <Text style={{fontSize: 13, color: '#858585'}}>0</Text>
          <Text style={{fontSize: 13, color: '#858585', marginLeft: 15}}>50</Text>
          <Text style={{fontSize: 13, color: '#858585'}}>100</Text>
        </View>
      </View>
      <View style={{ marginLeft: "auto" }}>
        <TextField
          value={props.points.toString()}
          onChangeText={(text) => {
            props.handleChange(text);
          }}
          containerStyle={{
            borderWidth: 1,
            borderColor: "#d9d9d9",
            width: 45,
            borderRadius: 5,
          }}
        />
      </View>
    </View>
  );
};

export default PointsSlider;