Framework7: Range slider not visible in native iOS apps

Created on 22 May 2017 · 11Comments · Source: framework7io/framework7

This is a (multiple allowed):

[x] bug
[ ] enhancement
[ ] feature-discussion (RFC)

What you did

Build current master branch
Take iOS kitchen sink
Build iOS app with Cordova

Expected Behavior

Range slider visible with iOS theme on iOS

Actual Behavior

Range slider not visible with iOS theme on iOS (but with Material theme on iOS)

Native App Priority Medium iOS bug outdated

Source

scriptPilot

All 11 comments

@valnub - The Material design slider works fine instead. Is there any known CSS workarond I could apply?

scriptPilot on 7 Jun 2017

👍1

Sorry, don't really know this component well enough but you could try to dig into the source and check what's going on:

valnub on 7 Jun 2017

Hi,
As I'am using the library for web build only in this moment (React) and I have the same issue in the following context:

When developing - is displayed
After build - is not displayed

Thanks,
Paul

devel-pa on 13 Jun 2017

👍1

@devel-pa I am facing the same problem. After building it's not working anymore. Using Vue. Did you find a solution?

rvanzon on 22 Aug 2017

👍1

@rvanzon yes, I was using another component library for this specific control

devel-pa on 22 Aug 2017

@devel-pa thanks for answering. Not the answer I was looking for, though ;) But think I've to do the same, unfortunately.

rvanzon on 22 Aug 2017

I tried to find out the problem, without much luck. I think it has something to do with CSS-compression. But I have a workaround: copy the .range-slider CSS and place it in your HTML between style-tags and the slider works again.

iOS (until #3614): https://github.com/nolimits4web/Framework7/blob/d575d3972954c74a8e3d58e969fbc910dcc790ff/dist/css/framework7.ios.css#L3472

Material (#until 3506)
https://github.com/nolimits4web/Framework7/blob/d575d3972954c74a8e3d58e969fbc910dcc790ff/dist/css/framework7.material.css#L3406

If you want to help. The CSS below is compressed after building.
Try to find out, why it's working:
(one thing I did is replacing input[type=range] with input[type="range"], no difference)
.range-slider{width:100%;position:relative;overflow:hidden;padding-left:3px;padding-right:3px;margin-left:-1px;-ms-flex-item-align:center;-webkit-align-self:center;align-self:center}.range-slider input[type=range]{position:relative;height:28px;width:100%;margin:4px 0 5px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#b7b8b7),color-stop(100%,#b7b8b7));background:linear-gradient(90deg,#b7b8b7 0,#b7b8b7);background-position:50%;background-size:100% 2px;background-repeat:no-repeat;outline:0;border:none;box-sizing:content-box;-ms-background-position-y:500px}.range-slider input[type=range]:active,.range-slider input[type=range]:focus{border:0;outline:0}.range-slider input[type=range]:after{height:2px;background:#fff;content:" ";width:5px;top:50%;margin-top:-1px;left:-5px;z-index:1;position:absolute}.range-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;position:absolute;position:relative;cursor:pointer;margin-top:-1px}.range-slider input[type=range]::-webkit-slider-thumb,.range-slider input[type=range]::-webkit-slider-thumb:after{height:28px;width:28px;border-radius:28px;background:#fff;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,.4);border:0;outline:0;box-sizing:border-box;content:" "}.range-slider input[type=range]::-webkit-slider-thumb:after{position:absolute;left:0;top:0}.range-slider input[type=range]::-webkit-slider-thumb:before{position:absolute;top:50%;right:100%;width:2000px;height:2px;margin-top:-1px;z-index:1;background:#007aff;content:" "}.range-slider input[type=range]::-moz-range-track{width:100%;height:2px;background:#b7b8b7;border:none;outline:0}.range-slider input[type=range]::-moz-range-thumb{height:28px;width:28px;border-radius:28px;background:#fff;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,.4);border:0;outline:0;position:absolute;box-sizing:border-box;content:" "}.range-slider input[type=range]::-ms-track{width:100%;height:2px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.range-slider input[type=range]::-ms-thumb{height:28px;width:28px;border-radius:28px;background:#fff;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,.4);border:0;outline:0;position:absolute;content:" ";box-shadow:none;border:1px solid rgba(0,0,0,.2);box-sizing:border-box;margin-top:0;top:50%}.range-slider input[type=range]::-ms-fill-lower{background:#007aff}.range-slider input[type=range]::-ms-fill-upper{background:#b7b8b7}

rvanzon on 13 Sep 2017

👍1

@devel-pa Which library ?
@rvanzon That code isn't working for me :disappointed: