2021-01-23 Increment/Decrement

by Ttt Yyy

HTML

<div id='sliderContainer' class='container'>
  <span id='min'>0</span>
  <input id='slider' class='slider' type='range' min='0' max='100' value='50'>
  <span id='max'>100</span>
  <div>
    Value: <span id='sliderValue'>50</span>
  </div>
</div>

<div id='incrementDecrementContainer' class='container'>
  <button id='decrement'>-</button>
  <span id='incrementDecrementValue'>0</span>
  <button id='increment'>+</button>
</div>

<div id="checkboxContainer" class='container'>
  <input id='checkbox' type='checkbox'>
  <span id='checkboxValue'>false</span>
</div>

CSS

.container {
  margin-bottom: 40px;
}


/* .slider {
  -webkit-appearance: none;  Override default CSS styles
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider:hover {
  opacity: 1;
} */

JavaScript

// slider
const slider = document.getElementById('slider')
const sliderValue = document.getElementById('sliderValue')

slider.addEventListener('input', event => {
	sliderValue.innerHTML = slider.value;
})


// increment/decrement

const decrement = document.getElementById('decrement');
const increment = document.getElementById('increment');
const incrementDecrementValueElement = document.getElementById('incrementDecrementValue');

decrement.addEventListener('click', event => {
	let newValue = incrementDecrementValueElement.innerText;
  newValue--;
  incrementDecrementValueElement.innerText = newValue;
})

increment.addEventListener('click', event => {
	let newValue = incrementDecrementValueElement.innerText;
  newValue++;
  incrementDecrementValueElement.innerText = newValue;
})


//checkbox
const checkbox = document.getElementById('checkbox');
checkbox.addEventListener('input', event => {
checkboxValue.innerHTML = checkbox.checked;
})