JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="threshold-slider">
  <div class="threshold-input-container min">
    <input type="number" id="min" value="10">
  </div>
  <div class="threshold-input-container max">
    <input type="number" id="max" value="50">
  </div>
</div>

SCSS

body {
	background: #0e0727;
}

.threshold {

  &-slider {
    width: 240px;
    height: 10px;
    border-radius: 20px;
    position: relative;
    background: #ffc300;
    margin: 100px;
		display: flex;
		justify-content: space-evenly;

    &:before,
    &:after {
      content: "";
      width: calc(100% / 3);
      position: absolute;
      height: 100%;
      left: 0;
      background: #54be81;
      top: 0;
      border-radius: 20px;
    }

    &:after {
      left: auto;
      right: 0;
      background: #FF4E00;
    }
  }

  &-input-container {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: #fff;
    box-shadow: 0px 0px 0px 6px #0e0727, 0px 0px 3px 1px rgba(0,0,0,0.5);
    top: -15px;
		z-index: 2;

/*     &.min {
      left: calc(100% / 3);
    			transform: translateX(-50%);
    }
    
    &.max {
      right: calc(100% / 3);
    			transform: translateX(50%);
    } */
		
		input {
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			height: 100%;
			background: transparent;
			border: none;
			text-align: center;
			color: #212121;
			font-size: 14px;
			letter-spacing: -0.3px;
			font-weight: bold;
			
			&:active, &:focus {
				outline: 0;
			}
		}
  }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}