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={10}
          maximumValue={100}
        />
        <View row spread>
          <Text>0</Text>
          <Text>50</Text>
          <Text>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;