<svg width="600" height="80" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line class="line" x1="0" x2="600" y1="0" y2="0" stroke="#4af" stroke-width="20" />
</svg>

<div class="range-container">
  <input class="range" type="range" min="0" max="200" value="0" step="40">
  <p>stroke-dasharray: <output name="result" class="result">0  </output></p>
</div>
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.6rem;
}

.range-container {
  margin: 2rem auto 0;
  text-align: center;
}

.line {
  --stroke-dasharray: 0;
  stroke-dasharray: var(--stroke-dasharray);
}
const line = document.querySelector('.line')
const range = document.querySelector('.range')

range.addEventListener('input', handleSlider)

function handleSlider (e) {
  let value = e.target.value
  line.style.setProperty('--stroke-dasharray', value)
  document.querySelector('.result').innerHTML = value
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.