PliWould/components/PercentDamange.tsx

import { StyleSheet, Text, TextInput, View } from "react-native";
import Slider from '@react-native-community/slider';
import { useEffect, useState } from "react";

type PercentDamageProps = {
    onSetPercentage: (percent: number) => any;
}

function getDamangeColor(damage : number) {
    if (damage === 0) return "black";
    if (damage <= 20) return "blue";
    if (damage <= 50) return "orange";
    return "red";
}

export default function PercentDamage({ onSetPercentage }: PercentDamageProps) {
    const [damage, setDamage] = useState(0);
    const [damageColor, setDamageColor] = useState("black");
    function doOnChangeText(val: number) {
        setDamage(val || 0);
        onSetPercentage((val / 100) || 0);
        setDamageColor(getDamangeColor(val || 0));
    }

    return (
        <View style={styles.wrapper}>
            <Slider
                minimumValue={0}
                maximumValue={100}
                step={5}
                onValueChange={doOnChangeText}
            />
            <Text style={{ ...styles.label, color: damageColor }}> {damage}% Damage</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    wrapper: {
        padding: 5,
    },
    input: {
        flex: 1,
        margin: 5,
        padding: 5,
        borderWidth: 2,
        borderColor: "lightgrey",
        borderStyle: "solid",
    },
    label: {
        margin: 5,
        alignSelf: "center",
        fontSize: 20,
        fontWeight: "bold",
        fontStyle: "italic",
    }
})