Materialize: input type='range' acts not properly on Safari on iOS

[transpirman]

Hello,

Range sliders (e.g. in http://materializecss.com/forms.html) are acting weird sometimes on Safari (tested on iPad & iPhone iOS 8.4):

• the 'thumb' does not disappear when we stop touching the slider
• it may be not aligned with the slider itself

[yetanotherse]

+1

[ModrichBadr]

+1

[pufinek]

hi, i had some problems with range too, Safari need prefix -webkit- for transition and transform , try to add to css same command for this just with prefix -webkit-

in my case i saw this on Safari, some tablets and mobile, but when i add this to css, it was ok:

.noUi-target .range-label{
    -webkit-transition: border-radius .25s cubic-bezier(.215, .61, .355, 1),transform .25s cubic-bezier(.215, .61, .355, 1);
    -webkit-transform: scale(.5) rotate(-45deg);
    -webkit-transform-origin: 50% 100%;
}

.noUi-target .noUi-active .range-label{
        -webkit-transform:rotate(-45deg) translate(23px, -25px);
    }

.noUi-horizontal .noUi-handle{
    -webkit-transition:width .2s cubic-bezier(.215, .61, .355, 1),height .2s cubic-bezier(.215, .61, .355, 1),left .2s cubic-bezier(.215, .61, .355, 1),top .2s cubic-bezier(.215, .61, .355, 1);
}

.range-label span{
    -webkit-transform: rotate(45deg);
    -webkit-transition:opacity .25s cubic-bezier(.215, .61, .355, 1);

}

[tomscholz]

Closed due inactivity. Feel free to reopen it, if it's still necessary.

[ritwikbanerjee]

This is still prevelant. Can some one please re-open this. Safari for iphone/ipad range slider doesnot work on tap. It does however work on slide.

[kurry421]

Having issues on this with touch devices..

[soypaduano]

same here