<svg xmlns="http://www.w3.org/2000/svg" height="40" width="500" viewBox="0 0 500 40"><path id="path" d="M0 20 l300 0" stroke="#000" stroke-width="4.3" fill="none" stroke-dasharray="50 50" stroke-dashoffset="0"></path></svg>

<div>
  <p><code>stroke-dasharroy="<span id="dasharroy"></span>"</code></p>
  <input type="range" min="0" max="500" value="50" id="length1"> <input type="range" min="0" max="500" value="50" id="length2">
</div>
<div>
  <p><code>stroke-dashoffset="<span id="dashoffset"></span>"</code></p>
  <input type="range" min="-100" max="100" value="0" id="offset" style="width:200px">
</div>

var path = document.getElementById("path");

var length1 = document.getElementById("length1");
var length2 = document.getElementById("length2");
var offset = document.getElementById("offset");

var dasharroy = document.getElementById("dasharroy");
var dashoffset = document.getElementById("dashoffset");

function update() {
  dasharroy.innerHTML = path.style.strokeDasharray = length1.value + " " + length2.value;
  dashoffset.innerHTML = path.style.strokeDashoffset = offset.value;
};

length1.oninput = length2.oninput = offset.oninput = update;

update();