slider not working in chrome

[rushikeshk-gdb]

What should happen?

progress bar background color dose not change according to value .

What happens instead?

I need to change progress bar color changes according to value

Possible Solution

Test Case and/or Steps to Reproduce (for bugs)

How to reproduce:
1.create and html input type="range" tag
2.provide the css for progress bar and progress bar thumb.
3.

Context

need to fill the progress bar background according to thumb position value.
but input[type="range"] parameter take an overflow:"hidden" option .
i didn't want this i need to support progress bar like it works in other browsers.

Your Environment

• Foundation version(s) used:
• Browser(s) name and version(s): Version 71.0.3578.98
• Device, Operating System and version: windows 8
• Link to your project:

[DanielRuf]

Please provide a codepen with your code or link to your project so we can see the problem. And please provide the used Foundation Sites version.

[rushikeshk-gdb]

sorry I am new on git
i will provide code that i am using
i have added and comment for that option parameter

<style> body { height: 100vh; margin: 0; }

.slidecontainer{
position: relative;

}

input[type="range"] {
margin: auto;
-webkit-appearance: none;
position: relative;
overflow: hidden; /// if i remove this line then it not working properly in chrome /////
height: 2px;
width: 100%;
cursor: pointer;
border-radius: 0;
}

::-webkit-slider-runnable-track {
background: #ddd;
}

::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px; /* 1 */
height: 40px;
background: #fff;
border-radius: 50%;
background-color: blue;
box-shadow: -100vw 0 0 100vw blue;
border: 2px solid #B90A0A;
}

::-moz-range-track {
height: 4px;
background: #ddd;
}

::-moz-range-thumb {
background: #fff;
height: 40px;
width: 20px;
border: 3px solid #999;
border-radius: 0 !important;
box-shadow: -100vw 0 0 100vw dodgerblue;
box-sizing: border-box;
}

::-ms-fill-lower {
background: dodgerblue;
}

::-ms-thumb {
background: #1F08E7;
border: 2px solid #999;
height: 40px;
width: 20px;
box-sizing: border-box;
}

::-ms-ticks-after {
display: none;
}

::-ms-ticks-before {
display: none;
}

::-ms-track {
background: #ddd;
color: transparent;
height: 4px;
border: none;
}

::-ms-tooltip {
display: none;
}
</style>

[rushikeshk-gdb]

Foundation Sites version -
not getting this

[DanielRuf]

Not sure but this does not look like you use Foundation and wrote your own code.

[DanielRuf]

https://foundation.zurb.com/sites/docs/progress-bar.html

https://foundation.zurb.com/sites/docs/slider.html

[rushikeshk-gdb]

I need to google it . Thanks I will try to use foundation

…

On Sun, Jan 13, 2019, 8:39 PM Daniel Ruf ***@***.*** wrote: Not sure but this does not look like you use Foundation and wrote your own code. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#11649 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Aq62_Vwmz4zUZaxebZ5v-mx_Rr405xlyks5vC0xDgaJpZM4Z9NPM> .

[asecondwill]

@rushikeshk-gdb - you should probably close this right?