<style>
input:in-range {
  mask-image: url(#a);
}
* {
  zoom: 32%;
}
</style>
<canvas id="a"></canvas>
<input type="range">