Limit slider value

by TigerAsks

HTML

<div class="vertical">
  <div>
    <input type="range" min="1" max="100" step="0.1" value="50" class="slider" id="slider">
    <span id="display">[value]</span>
  </div>
  <div>
  <input id="outside-value"><button type="button" id="set-btn" onclick="setValue()"> Set Value </button>
  </div>
  <div>
  <input id="value-limit"><button type="button" id="limit-btn" onclick="limitValue()"> Limit Value </button>
  </div>
</div>

CSS

.vertical {
  display: flex;
  flex-direction: column;
}

JavaScript

const slider = document.getElementById("slider")
const display = document.getElementById("display")
const valueInput = document.getElementById("outside-value")
const setValueBtn = document.getElementById("set-btn")
const limitInput = document.getElementById("value-limit")
const setLimitBtn = document.getElementById("limit-btn")

let softLimit = 70

display.innerHTML = slider.value
valueInput.value = slider.value
slider.addEventListener('input', onSliderInput )

function onSliderInput(e){
  const newValue =  slider.value
  display.innerHTML = newValue
  valueInput.value = newValue
  if(typeof softLimit !== 'undefined' && newValue > softLimit){
     valueInput.value = softLimit
     setValue()
     e.stopPropagation()
     e.preventDefault()
  }
}

function setValue(){
  const newValue = valueInput.value
  slider.value = newValue
  display.innerHTML = newValue
}

function limitValue(){
   softLimit = parseInt(limitInput.value)
   if(slider.value > softLimit){
       slider.value = softLimit
   }
}