JSFiddle - React, Tailwind, and code Playground

by Fernando De Leon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!--PI Calculator Range Slider-->
<form name="injury_calculator">
  <div class="pi-calculator-wrapper col-md-12">
    <div class="content-wrapper">
      <div class="pi-calculator-title">
        <div class="title clearfix">Enter Your Estimate Damages</div>
      </div>
      <div class="pi-damages">
        <label for="medical-expenses">Medical Expenses</label>
        <span class="label1">$ <input type="number" id="input1" min="0" max="10000"></input></span>
        <input id="field1" name="field1" class='rangeslider rangesslider__fill' type="range" min="0" max="10000" value="0" data-rangeslider>

        <label for="vehicle-damage">Vehicle Damage</label>
        <span class="label2">$ <input type="number" id="input2" min="0" max="10000"></input></span>
        <input id="field2" name="field2" type="range" min="0" max="10000" value="0" data-rangeslider>

        <label for="lost-income">Lost Income</label>
        <span class="label3">$ <input type="number" id="input3" min="0" max="10000"></input></span>
        <input id="field3" name="field3" type="range" min="0" max="10000" value="0" data-rangeslider>

        <label for="rental-vehicle-cost">Rental Vehicle Cost</label>
        <span class="label4">$ <input type="number" id="input4" min="0" max="10000"></input></span>
        <input id="field4" name="field4" type="range" min="0" max="10000" value="0" data-rangeslider>
      </div>

      <input type="button" id="calculate-settlement" value="Calculate Settlement" onclick="settlement(injury_calculator)" />

      <div id="EstimateResult">
        <div class="panel panel-group">
          <div class="panel-body">
            <h4>
              Total Financial Damages: <label for="sum" id="sum" name="sum"></label>
            </h4>
            <br>
            <h4 class="worth-between">
              Your Personal Injury Settlement is Worth Between:<br><br>
             ...

CSS

input[type="range"]{
  -webkit-appearance:none;
  width:160px;
  height:20px;
  margin:10px 50px;
  background: linear-gradient(to right, #64c832 90%, #9A2720 100%);
  background-size:150px 10px;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  outline: none;
}

input[type="range"]:first-of-type{
  margin-top:20px;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;
  height:20px;
  background:#F26B5E;
  position:relative;
  z-index:3;
  box-shadow:0 0 5px 0 rgba(0,0,0,0.3);
}

input[type="range"]::-webkit-slider-thumb:after{
  content:" ";
  width:180px;
  height:10px;
  position:absolute;
  z-index:1;
  right:20px;
  top:5px;
  background: #ff5d32;
  background: linear-gradient(to right, #f088fc 1%, #AC6CFF 70%);
}

p{
  width:100%;
  text-align:center;
  color:white;
  font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', Roboto, Arial, Sans-serif;
  font-size:32px;
  margin-top:30px;
}