web-dev-qa-db-ja.com

トラックをクリックしたときに入力範囲スライダーがiOS Safariで機能しない

私はかなり単純な範囲入力スライダーを持っています。 iOS Safariを除くすべてのブラウザーでかなりうまく機能します。

主な問題は、スライダートラックをクリックしたときにスライダーが動かないことです。スライダーを強調表示するだけです。親指をドラッグするとうまくいきます。これを修正する方法に関するアイデアはありますか？

<div class="slider-wrap">
    <div id="subtractBtn"></div>
    <input type="range" class="slider">
    <div id="addBtn"></div>
</div>
ioshtmlmobile-safari
48
Jan Swart

Cameron Gilbertによって提示されたソリューションの拡張バージョン。この実装は、最小値が負の数に設定され、オプションでステップサイズが設定されたスライダーで機能します。

TypeScriptを使用していない場合は、プレーンJavaScriptに変換するかどうかはあなたに任せます。

if (!!navigator.platform.match(/iPhone|iPad|iPod/)) {
mySlider.addEventListener(
    "touchend",
    (touchEvent: TouchEvent) => {
        var element = touchEvent.srcElement as HTMLInputElement;
        if (element.min && element.max && touchEvent.changedTouches && touchEvent.changedTouches.length > 0) {
            const max = Number(element.max);
            const min = Number(element.min);
            let step = 1;
            if (element.step) {
                step = Number(element.step);
            }
            //Calculate the complete range of the slider.
            const range = max - min;

            const boundingClientRect = element.getBoundingClientRect();
            const touch = touchEvent.changedTouches[0];

            //Calculate the slider value
            const sliderValue = (touch.pageX - boundingClientRect.left) / (boundingClientRect.right - boundingClientRect.left) * range + min;

            //Find the closest valid slider value in respect of the step size
            for (let i = min; i < max; i += step) {
                if (i >= sliderValue) {
                    const previousValue = i - step;
                    const previousDifference = sliderValue - previousValue;
                    const currentDifference = i - sliderValue;
                    if (previousDifference > currentDifference) {
                        //The sliderValue is closer to the previous value than the current value.
                        element.value = previousValue.toString();
                    } else {
                        element.value = i.toString();
                    }

                    //Trigger the change event.
                    element.dispatchEvent(new Event("change"));
                    break;
                }
            }
        }
    },
    {
        passive: true
    }
);

}

0
Williwyg

Safari 5.1 +は、「範囲」タイプを完全にサポートする必要があります。そのため、動作しないのは奇妙です。最小/最大/ステップ値を追加してみましたか？干渉する可能性のあるクラスなしで純粋なHTML属性のみを使用しようとするとどうでしょう-このコードを貼り付けてSafariブラウザで実行してみてください

<input type="range" min="0" max="3.14" step="any">

  • それは動作しているはずです-動作する場合、おそらくあなたのCSSに関連しているでしょう、そうでない場合は、ここで純粋なHTMLの例の1つを使用してみてください：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

0
Yulian Amstislavski

CSSプロパティ-webkit-tap-highlight-color: transparentを要素のCSSまたは完全なHTMLページに追加します。これにより、モバイルデバイスで要素をタップしたときに、要素の厄介なハイライト効果が取り除かれます。

0
Animan