JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<label id="subt0"></label>

<div id="web1" data-price="50">web1</div>
<div id="web2" data-price="20">web2</div>

           <input value="0" type="range" id="tobeRange" name="ranger"/>

CSS

.highlight {color:red;}


input[type=range] {-webkit-appearance: none;margin: 10px 0;width: 100%;}

input[type=range]:focus {
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ac51b5;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 30px;
  width: 76px;
  border-radius: 7px;
  background-image: url(http://mygimptutorial.com/images/button-with-reflection/11.jpg);
    background-size:300px;
    background-position:-70px -15px ;
    background-repeat:none;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border:...

JavaScript

var start_price = 0;
        
        $("#web1, #web2").click(function(){
            
			var amountToAdd = 0.0;
            
            $(this).toggleClass( "highlight" );

                        $("#web1, #web2").each(function(){

                if($(this).hasClass('highlight')) 
                    {
                        amountToAdd += parseFloat($(this).attr('data-price'));
                    }


                        });            
            
                            var counted = $('#tobeRange').val(amountToAdd+start_price);
    


            //$('#subt0').text(parseFloat(amountToAdd+start_price).toFixed(2));
       
        
        });