.range{height:80px;width:380px;border-radius:10px;padding:0 65px 0 45px}.sliderValue{position:relative;width:100%}.sliderValue span{position:absolute;height:45px;width:45px;transform:translateX(-70%) scale(0);font-weight:500;top:-40px;line-height:55px;z-index:2;color:#fff;transform-origin:bottom;transition:transform .3s ease-in-out}.sliderValue span.show{transform:translateX(-70%) scale(1)}.field{align-items:center;justify-content:center;height:100%;position:relative}.field .value{position:absolute;font-size:18px;color:#00f;font-weight:600}.field .value.left{left:-22px}.field .value.right{right:-43px}.range input{width:100%}.range input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:red;border-radius:50%;background:#00f;border:1px solid #00f;cursor:pointer}.range input::-moz-range-thumb{-webkit-appearance:none;width:20px;height:20px;background:red;border-radius:50%;background:#00f;border:1px solid #00f;cursor:pointer}.range input::-moz-range-progress{background:#00f;//this progress background is only shown on Firefox}