html5のrangeカスタムについて

###実現したいこと
htmlで数値を取得するためにrangeを用いてスライダーバーを実装しています。
私がやりたいことは選択範囲を絞り込みたいのですが、思うようなやり方が見つかりません。
例えば１〜１００の範囲のスライダーを作ったとして、大きさは１〜１００のままで動かせる範囲だけを２０〜５０の間というように制限したいのです。
disabledを記述しても全体が選択不可になってしまいますし、一部分のみを選択不可にするということはできないのでしょうか・・？
css,javascriptも使えます、ヒントになるようなことでも助かりますのでお願いします。

###試したこと
目盛りのみを２０〜５０の間にするということは試してみましたが、全体に動かせてしまうため私のやりたい実装になりませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
Monacaにてhtml,javascript,cssで実装を行っています。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1var target=document.getElementById('range');
2target.addEventListener('input', e => {
3  if (e.target.value < 20) e.target.value = 20;
4  if (50 < e.target.value) e.target.value = 50;
5})