ConfidenceSlider

ConfidenceSlider.js

import React from 'react';
import {Text} from 'react-native';
import {useState} from 'react';
import Slider from '@react-native-community/slider';

export const ConfidenceSlider = () => {
  const minValue = 0;
  const maxValue = 100;
  const initialValue = 50;
  const descriptions = [
    'This is a scam attempt',
    'I think this is a human being',
    'I am confident this is a human being',
    'This is a real human being and I trust him',
    'This is my best friend',
  ];

  const [labelTextIndex, setLabelTextIndex] = useState(1);

  const getTextIndexForValue = (value) => {
    const segmentSize = (maxValue - minValue) / descriptions.length;
    const indexValue = value / segmentSize;
    const index = Math.floor(indexValue);
    console.log(`Value: ${value}, index: ${indexValue} -> ${index}`);
    return Math.min(index, descriptions.length - 1);
  };

  const valueChangeHandler = (value) => {
    const textIndex = getTextIndexForValue(value);
    setLabelTextIndex(textIndex);
  };

  return (
    <>
      <Text>{descriptions[labelTextIndex]}</Text>
      <Slider
        style={{width: 300, height: 50}}
        value={initialValue}
        minimumValue={minValue}
        maximumValue={maxValue}
        minimumTrackTintColor="green"
        maximumTrackTintColor="red"
        thumbTintColor={'orange'}
        onValueChange={valueChangeHandler}
      />
    </>
  );
};