You can't click on an input type=range iOS phone, but you can drag and drop it.

made a progress bar, which can be clicked and dragged on Android phones, but can only be dragged and dragged on iOS phones. What is this all about? Hurry! Hurry! Hurry! -sharp-sharp-sharp problem description

Link address:

http://wxqas.yayaim.com:8666/yunzhongku/test/photon/photon-v1.1.0/basic.html?token=18219160086268450&appId=100099&networkStatus=2&phone=18219160086&limitTime=1535099558&soureIp=42.94.11.24:3276&channelId=00

related codes

    //HTML
    <input type="range" value="0">

< script >

    
    //
    $.fn.RangeSlider = function (cfg) {
        this.sliderCfg = {
            min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
            max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
            step: cfg && Number(cfg.step) ? cfg.step : 1,
            val: cfg && Number(cfg.val) ? cfg.val : 0,
            callback: cfg && cfg.callback ? cfg.callback : null
        };

        var $input = $(this);
        var min = this.sliderCfg.min;
        var max = this.sliderCfg.max;
        var step = this.sliderCfg.step;
        var val = this.sliderCfg.val;
        var callback = this.sliderCfg.callback;

        $input.attr("min", min)
            .attr("max", max)
            .attr("step", step)
            .attr("value", val);
        $input.css("background-image", "linear-gradient(to right, -sharpfb974a 0%, -sharpf76026 " + (step/max)*100*val + "%, transparent " + (step/max)*100*val + "%)" );
        // $input.css("background", "linear-gradient(to right, -sharp059CFA, white " + (step/max)*100*val + "%, white)");

        $input.bind("input", function (e) {
            // console.log(this.value);
            $input.attr("value", this.value);
            $input.css("background-image", "linear-gradient(to right, -sharpfb974a 0%, -sharpf76026 " + (step/max)*100*this.value + "%, transparent " + (step/max)*100*this.value + "%)");
            if ($.isFunction(callback)) {
                callback(this);
            }
        });
    };
</script>

<script>
    //
    var change = function ($input) {
        /**/
        console.log($($input).val());
    }

    $("input").RangeSlider({
        min: 0,  //
        max: 2,  //
        step: 1,  //
        val: 1,  //
        callback: change   //
    });
</script>

what result do you expect? What is the error message actually seen?

I hope iOS is the same as Android. You can also click

.
Apr.06,2021

ios does not support range attribute

Menu