Range Slider with React and Typescript

Question

I have created range slider but when we change the min value then it will not work. I want dynamic range Slider with ticks and moving label with respect to thumb without using any package.

This is my code below. i am expecting to create a dynamic range slider without using any package and also slider have ticks and movable thumbs which shows value with respect to thumbs

import { useCallback } from 'react';
import { Styles } from './range-slider-style';


interface IVersionSliderProps {
  latestVersion: number;
  olderVersion: number;
  onChange: (val: any) => void;
}

export function VersionSlider(props: IVersionSliderProps) {

  
  const setValue = useCallback((e) => {
    console.log(e.target.value);
    const newVal = e.target.value;
    const negNewVal = -10 * Number(newVal);
    console.log(negNewVal);

    (document.querySelector('.range-text') as HTMLDivElement).style.left = (newVal + '%'); //Set range left position
    (document.querySelector('.range-text') as HTMLDivElement).style.transform = 'translate(' + negNewVal + '%, 20px)'; //Set range translate to correct
    (document.querySelector('.range-text') as HTMLDivElement).innerHTML = newVal; //Set range text equal to input position
  }, []);

  return (
    <Styles>
      <div className="input-container">
        <input
          id='#input'
          type="range"
          min={olderVersion}
          max={latestVersion}
          //value="1"
          onChange={setValue}
          step='.01' />
        <div className="range-text">0</div>
      </div>
    </Styles>
  );
}


//Css part below:

import styled from 'styled-components';

export const Styles = styled.div`
  align-items: center;
  display: "flex";
  height: 100px;
  color: #888;
  margin-top: 2rem;
  flex-direction:column;
  margin-bottom: 2rem;
  width: 1200px;
  .value {
    font-size: 1rem;
  }
.input-container {
  position: relative;
  height:10px;
  display: flex;
  background: border-box;
  width: 100%;
  padding: 0;
}
.marking {
  height:20xp;
  widht:100%;
  background-color: "black";
  margin-top: 20px;
}
input[type="range"] {
  appearance: none;
  background-color: #56B0C9;
  width: 100%;
  height: 8px;
  padding: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -moz-appearance: none !important;
  appearance: none !important;
  position: relative;
  height: 20px;
  width: 100px;
  background: transparent;
  cursor: ew-resize;
  z-index: 2;
}
input[type="range"]::-moz-range-thumb {
  -moz-appearance: none !important;
  appearance: none !important;
  position: relative;
  height: 20px;
  width: 100px;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.range-text {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  text-align: center;
  line-height: 1;
  height: 18px;
  width: 60px;
  transform: translate(0, 2px);
}`;