JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p>Amount: £<span id="display2"></span></p>

<div class="range">
<div class="fl"> < <span id="rangeBot">1000</span>  </div>
<div class="fr">  <span id="rangeTop">10000</span> > </div>
</div>

<div class="clear"></div>

<div class="inc_but inc_left" onclick="dec('2');"><span></span></div>  
<input type="range" min="1000" max="10000" value="3000" step="0.01" class="slider" id="range2">
<div class="inc_but" onclick="incr('2');"><span></span></div> 


<p>...</p>
<p>...</p>
<p>...</p>

<p>Broker Fees: <span id="display1"></span> %</p>
  
<div class="inc_but inc_left" onclick="dec('1');"><span></span></div>  
<input type="range" min="5" max="10" value="7.5" step="0.01" class="slider" id="range1">
<div class="inc_but" onclick="incr('1');"><span></span></div>

<p>...</p>
<p>...</p>
<p>...</p>

<div class="amount_dumb" onclick="foc();">
<span id="amount_dumb" >click me!</span>
<div class="amount_true">Amount
<input id="amount" type="tel">
ok
</div>
</div>

CSS

.amount_dumb {border:1px solid #999999;padding:5px;position:relative;}
.amount_true {border:1px solid #999999;padding:5px;position:absolute;top:-20px;left:-1px;background-color:#ffffff;}
.amount_true input {display:block;}

.slidecontainer {
  width: 100%;
}

.slider {float:left;width:calc(100% - 60px);
  -webkit-appearance: none;
  box-sizing:border-box;
  height: 40px;
  background: #FDE8D9;
  padding:0;
  margin:0;
  outline:0;
  border:solid #999;
  border-width:1px 0;
}



.slider::-webkit-slider-thumb {border-radius:10px;
  box-sizing:border-box;
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 38px;
  background: #F48225;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  box-sizing:border-box;
  width: 30px;
  height: 38px;
  background: #F48225;
  cursor: pointer;
}

.inc_but {width:30px;height:40px;position:relative;background: #ffffff;cursor:pointer;
  padding:0;
  margin:0;
  outline:0;
  border:solid #999;
  border-width:1px;
  box-sizing:border-box;
  display:inline-block;
  float:left;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  line-height:40px;text-align:center;}

.inc_but span, .inc_but span {position:absolute;top: 0; left: 0; bottom: 0; right: 0;display:inline-block;background-color:#F48225;width:20px;height:12px;margin:auto;
clip-path: polygon(45% 0, 75% 50%, 45% 100%, 30% 100%, 55% 50%, 30% 0);}

.inc_left {border-radius:3px 0 0 3px;}
.inc_left span {-moz-transform: scaleX(-1);-o-transform: scaleX(-1);-webkit-transform: scaleX(-1);transform: scaleX(-1);filter: FlipH;-ms-filter: "FlipH";}

.clear {display:block;clear:both;}
.range {display:block;clear:both;}
.fr {display:inline;float:right;}
.fl {display:inline;float:left;}

JavaScript

function foc() {
var inp = document.getElementById("amount");
inp.focus();
}

var slider1 = document.getElementById("range1");
var output1 = document.getElementById("display1");
var slider2 = document.getElementById("range2");
var output2 = document.getElementById("display2");
output1.innerHTML = slider1.value;
output2.innerHTML = slider2.value;
slider1.oninput = function() {output1.innerHTML = Math.ceil(this.value*2)/2;}

var inc = 100;

var rangeBot = document.getElementById('rangeBot');

var rangeTop = document.getElementById('rangeTop');

var x = 1;

slider2.oninput = function() {

/*
var fig1 = (slider2.max - slider2.min) / 100;
var fig2 = (slider2.value - slider2.min) / fig1; // perc
percOutput.innerHTML = Math.ceil(fig2);

increm(fig2); */



output2.innerHTML = Math.ceil(this.value/inc)*inc;

slider2.addEventListener("mouseup", function () {
if (slider2.value == 5000) {slider2.min = 1000;slider2.max = 10000; inc = 100;rangeBot.innerHTML = 1000;rangeTop.innerHTML = 10000;}
if (slider2.value == 10000) {slider2.min = 5000;slider2.max = 15000; inc = 100;rangeBot.innerHTML = 5000;rangeTop.innerHTML = 15000;}
if (slider2.value == 15000) {slider2.min = 10000;slider2.max = 20000; inc = 100;rangeBot.innerHTML = 10000;rangeTop.innerHTML = 20000;}
if (slider2.value == 20000) {slider2.min = 10000;slider2.max = 30000; inc = 500;rangeBot.innerHTML = 10000;rangeTop.innerHTML = 30000;}

if (slider2.value == 30000) {slider2.min = 20000;slider2.max = 40000;rangeBot.innerHTML = 20000;rangeTop.innerHTML = 40000;}
if (slider2.value == 40000) {slider2.min = 30000;slider2.max = 50000;rangeBot.innerHTML = 30000;rangeTop.innerHTML = 50000;}
if (slider2.value == 50000) {slider2.min = 40000;slider2.max = 60000;rangeBot.innerHTML = 40000;rangeTop.innerHTML = 60000;}
if (slider2.value == 60000) {slider2.min = 50000;slider2.max = 70000;rangeBot.innerHTML = 50000;rangeTop.innerHTML = 70000;}
if (slider2.value == 70000) {slider2.min = 60000;slider2.max = 80000;rangeBot.innerHTML =...