javascriptのinput[type=range]において、タップでの入力をできない様にしたい

Question

前提・実現したいこと

javascriptのinput[type=range]において、タップでの入力をできない様にしたいと考えています。
デバイスとしてはスマートフォンを想定していて、touchmoveイベントを使ってスライドさせないと回答
できない様にしたいのですが、解決策がわかりません。

該当のソースコード

<div class="slider-container">
  <input class="slider" type="range" value="0" min="0" max="5" step="0.01">
</div>

document.querySelector(".slider").addEventListener("touchend", function(event) {
  event.preventDefault();
}, false);
document.querySelector(".slider").addEventListener("touchstart", function(event) {
  event.preventDefault();
}, false);

試したこと

touchstartとtouchendイベント発生時にpreventDefault()を試してみましたが、以前タッチ操作が可能なままです。
エラー等は出ていません。何か良い方法等ありましたら教えていただ期待です。

Comments

[m.ts10806]

「できない」「無理だった」「うまくいかない」などで他者に伝わる情報量はゼロなので
具体的に起きている現象を記載してください。
https://teratail.com/help/question-tips#questionTips3-4-1

あと、コピペで再現できるよう、HTMLも提示してください。

[Taka_1513]

ご指摘ありがとうございます。只今の状況とHTMLを追記しました。

[m.ts10806]

タッチと言うかclickが発火してませんか？

Answer 1

タップでの入力をできない様にしたいと考えています。

でしたら、標準の<input>を使うべきではありません。自分で描画したものを使うほうが適当です。

ユーザーは、標準的な入力フォームに対しては標準的な操作ができるものと想定します。その想定を崩されると、ユーザーにとっては使いにくいものとなることでしょう。

Answer 2

https://stackoverflow.com/questions/20387534/prevent-mousedown-event-on-input-range-html-element-and-still-let-user-drag-slid/52007221

こちらを参考に解決しました。
回答いただいた皆様ありがとうございました。