Struggling with Custom CSS/HTML Slider

Ionic Framework ionic-v3
1

Because the Ionic Creator doesn’t offer much customization for the range component, I decided to play with some HTML and CSS.

The standard slider (below) works fine.

<div id="slidecontainer">
  <p>Default range slider:</p>
  <input type="range" min="1" max="100" value="50">

But when I add CSS (below) it vanishes.

I’m putting this in the SCSS … editing place…

#slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

…and this in the HTML window.

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

Anyone see where I’m going wrong?

2

Hi !
Same issue.
A solution ?

3

I realized this slider needs width in exact pixel value.
Try to set it to 200px. Width 100% on slider doesn’t work on cordova webview…