change the color of the range slider?

Question

I'm coding a price calculator right now and i want to change the color to green for my range slider.

I'm trying to change the color of the range slider and i tried it with css but it doesn't change the color? Also in the middle there is a grey line how would i be able to have the two grids right next to each other without the grey line.

 const btncalc = document.querySelector('.calcit'); const summetext = document.querySelector('.summe'); const backend = document.querySelector('.backenduser'); const update = document.querySelectorAll('.update'); const backendstk = document.querySelector('.backendanzahl') const appstk = document.querySelector('.appanzahl') const preisproapp = document.querySelector('.proapp') const preisprobackend = document.querySelector('.probackend') const jährlich = document.querySelector('.rabatt') update.forEach(input => { input.addEventListener('input', function () { calcSum(); }) }); //funktion damit der Slider sich beim eingeben vom input field bewegt function updateAppUser(val, inputtype) { if (inputtype == 'appslider') { document.getElementById('AppInput').value = val; } if (inputtype == 'appinput') { document.getElementById('appuserSlider').value = val; } calcSum(); } function updateBackendUser(val, inputtype) { if (inputtype == 'backendslider') { document.getElementById('BackendInput').value = val; } if (inputtype == 'backendinput') { document.getElementById('backendSlider').value = val; } calcSum(); } //Rechnung für die Anzahl von Backend und App-Benutzern function calcSum() { var backendanzahl = document.getElementsByClassName("backenduser")[0].value; var appanzahl = document.getElementsByClassName("appuser")[0].value; var annual = document.getElementById("annual"); var myList = document.getElementById("myList"); var backendtype = myList.options[myList.selectedIndex].value; var paymenttype = annual.options[annual.selectedIndex].value; var percent = 1; //Standardvalue for yearly if(paymenttype == "M"){ percent = 1.1; //standardvalue for monthly } //Preisstaffelung für app und backend apppreis = 7.5; backendpreis = 35; if (backendtype == "ZR") { if (backendanzahl < 5) { backendpreis = 35 * percent; } else if (backendanzahl < 11) { backendpreis = 32.50 * percent; } else if (backendanzahl < 21) { backendpreis = 30 * percent; } } console.log(backendanzahl); if(backendtype == "Z"){ if (backendanzahl < 6) { backendpreis = 20 * percent; } else if (backendanzahl < 11) { backendpreis = 18 * percent; } else if (backendanzahl < 21) { backendpreis = 16 * percent; } } if(backendtype == "ZR"){ if (appanzahl < 11) { apppreis = 7.5 * percent; } else if (appanzahl < 26) { apppreis = 7 * percent; } else if (appanzahl < 51) { apppreis = 6.50 * percent; } else if (appanzahl < 76) { apppreis = 6 * percent; } else if (appanzahl > 76) { apppreis = 5.5 * percent; } } if(backendtype == "Z" ){ if (appanzahl < 11) { apppreis = 7.5 * percent; } else if (appanzahl < 26) { apppreis = 7 * percent; } else if (appanzahl < 51) { apppreis = 6.50 * percent; } else if (appanzahl < 76) { apppreis = 6 * percent; } else if (appanzahl > 76) { apppreis = 5.5 * percent; } } if (isNaN(proapp2)) proapp2 = 0.00; //turn NaN intro number //Rechnungen für app und backend(gesamtsumme,anzahl pro) var mytext = (((backendanzahl * backendpreis + +appanzahl * apppreis) * 1)).toFixed(2); summetext.textContent = mytext; var backendpreissumme = (backendanzahl * backendpreis).toFixed(2); backendstk.textContent = backendpreissumme; var apppreissumme = (appanzahl * apppreis).toFixed(2); appstk.textContent = apppreissumme; var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2); preisprobackend.textContent = probackend2; var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : "0.00"; preisproapp.textContent = proapp2; if(paymenttype == "J"){ var jährlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis)) * 12 .toFixed(2); jährlich.textContent = jährlicherrabatt; }else if(paymenttype == "M"){ var jährlicherrabatt = "0.00"; jährlich.textContent = jährlicherrabatt; } }

 .grid-container { display: grid; grid-template-columns:600px 250px ; grid-auto-rows: minmax(150px, auto); justify-items: stretch; align-items: stretch; } .grid-item-1 { align-self: start; justify-self: center; } /* Background Styles Only */ @import url('https://fonts.googleapis.com/css?family=Raleway'); * { font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif; } span{ color:grey; } header{ text-align: center; font-size: 20px; } *, *::before, *::after { box-sizing: border-box; } html, body { background-color: #333; height: 100%; margin: 0; } .grid-container { padding: 40px; width: 100%; grid-template-columns: 250px 200px; } .td, tr, th{ font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif; } #appuserSlider{ fill:rgb(0, 255, 106); stroke: none; } #backendSlider{ fill:rgb(0, 255, 106); stroke: none; } .grid-item { font-size: 15px; padding: 20px; padding-top: 15px; background-color: #f8f8f8; color: #222; border: 7px solid rgba(96,125,139,0.33); } .grid-item:nth-child(odd) { background-color: #f8f8f8; }a

 <div class="grid-container"> <div style="width: 270px" class="grid-item"> <header>Preiskalkulator</header> <div class="slidecontainer"> App-Benutzer: <br> <input id="appuserSlider" value="0" onchange="updateAppUser(this.value);" type="range" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateAppUser(this.value, 'appslider');" class='appuser update'></input> <input style="width: 30px" type="text" id="AppInput" value="0" placeholder="1-100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateAppUser(this.value, 'appinput');"><br> Backendbenutzer: <br> <input id="backendSlider" value="1" onchange="updateBackendUser(this.value);" type="range" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value); updateBackendUser(this.value, 'backendslider'); " class='backenduser update'></input> <input style="width: 30px" type="text" id="BackendInput" value="1" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateBackendUser(this.value, 'backendinput');"><br> </div> <b> Bürosoftware wählen </b> <select style="width: 150px" id="myList" onchange="calcSum()"> <option value="Z">Zeiterfassung</option> <option value="ZR"> Zeiterfassung + Rechnungswesen</option> </select> <select style="width: 150px" id="annual" onchange="calcSum()"> <option value="J">Jährlich</option> <option value="M">monatlich</option> </select> </div> <div class="grid-item" style="width: 270px"> <table style="width:100%;text-align: right;"> <tr> <td style="font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif; width: 138px">App-Benutzer<br> pro <span class="proapp">7,50</span>€</td> <td style="width: 62px" class='appanzahl'>75,00€</td> </tr> <tr> <td style="font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif">Backend-Benutzer<br>pro <span class='probackend'>35,00</span>€</td> <td class='backendanzahl'>175,00€</td> </tr> <tr> <td colspan="2"> <hr> </td> </tr> <tr> <td>Gesamtpreis mtl.:<br>(zzgl. MwSt)</td> <td class='summe'>75,00€</td> </tr> <tr> <td>Jährlich<br></td> <td class='rabatt'></td> </tr> </table> </div>

Answer 1

This solution was inspired by the suggestions given at this url:

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

For better styling the range slider in a cross-browser fashion.

The following snippet uses two sets of rules for:

• Resetting the default style
• Applying styles to set the background color of the track element

The color is given by the custom variable:

:root{
  --track-color: green;
}

The side effect is not having the color stop where the slider thumb is .. it takes the whole width so that's NOT probably what you are looking for , but I hope that link will give you further hints to better reach your goal

 /*---------------------------------------- * Rules to reset the style of input range *----------------------------------------*/ input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ } input[type=range]::-ms-track { width: 100%; cursor: pointer; /* Hides the slider so custom styles can be added */ background: transparent; border-color: transparent; color: transparent; } /*---------------------------------------------------- * Rules to set background color for the track element *----------------------------------------------------*/ :root{ --track-color: green; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: var(--track-color); border-radius: 1.3px; /*border: 0.2px solid #010101;*/ } input[type=range]:focus::-webkit-slider-runnable-track { background: val(--track-color); } input[type=range]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: var(--track-color); border-radius: 1.3px; /*border: 0.2px solid #010101;*/ } input[type=range]::-ms-track { width: 100%; height: 8.4px; cursor: pointer; background: transparent; border-color: transparent; /*border-width: 16px 0;*/ color: transparent; } input[type=range]::-ms-fill-lower { background: var(--track-color); /*border: 0.2px solid #010101;*/ border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } input[type=range]:focus::-ms-fill-lower { background: #3071a9; } input[type=range]::-ms-fill-upper { background: var(--track-color); /*border: 0.2px solid #010101;*/ border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } input[type=range]:focus::-ms-fill-upper { background: #367ebd; }

 <input type="range">

And as a mere reference, here you have your code embedded in a live snippet (with event handlers commented so that the js part won't print errors on console):

 @import url('https://fonts.googleapis.com/css?family=Raleway'); * { font: 13px/20px PTSansRegular, Arial, Helvetica, sans-serif; } span { color: grey; } header { text-align: center; font-size: 20px; } .grid-container { display: grid; grid-template-columns: 600px 250px; grid-auto-rows: minmax(150px, auto); justify-items: stretch; align-items: stretch; } .grid-item-1 { align-self: start; justify-self: center; }

 <html lang="en"> <head> <link rel="stylesheet" href="styles.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="grid-container"> <div style="width: 270px" class="grid-item"> <header>Preiskalkulator</header> <div class="slidecontainer"> App-Benutzer: <br> <input id="appuserSlider" value="0" onchange="/*updateAppUser(this.value);*/" type="range" min="0" max="100" oninput="/*this.value = this.value > 100 ? 100 : Math.abs(this.value); updateAppUser(this.value, 'appslider');*/" class='appuser update'></input> <input style="width: 30px" type="text" id="AppInput" value="0" placeholder="1-100" oninput="/*this.value = this.value > 100 ? 100 : Math.abs(this.value); updateAppUser(this.value, 'appinput');*/"><br> Backendbenutzer: <br> <input id="backendSlider" value="1" onchange="/*updateBackendUser(this.value);*/" type="range" min="1" max="15" oninput="/*this.value = this.value > 15 ? 15 : Math.abs(this.value); updateBackendUser(this.value, 'backendslider');*/" class='backenduser update'></input> <input style="width: 30px" type="text" id="BackendInput" value="1" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateBackendUser(this.value, 'backendinput');"><br> </div> <b> Bürosoftware wählen </b> <select style="width: 150px" id="myList" onchange="calcSum()"> <option value="Z">Zeiterfassung</option> <option value="ZR"> Zeiterfassung + Rechnungswesen</option> </select> <select style="width: 150px" id="annual" onchange="calcSum()"> <option value="J">Jährlich</option> <option value="M">monatlich</option> </select> </div> <div class="grid-item" style="width: 270px"> <table style="width:100%;text-align: right;"> <tr> <td style="font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif; width: 138px">App-Benutzer<br> pro <span class="proapp">7,50</span>€</td> <td style="width: 62px" class='appanzahl'>75,00€</td> </tr> <tr> <td style="font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif">Backend-Benutzer<br>pro <span class='probackend'>35,00</span>€</td> <td class='backendanzahl'>175,00€</td> </tr> <tr> <td colspan="2"> <hr> </td> </tr> <tr> <td>Gesamtpreis mtl.:<br>(zzgl. MwSt)</td> <td class='summe'>75,00€</td> </tr> <tr> <td>Jährlich<br></td> <td class='rabatt'></td> </tr> </table> </div> <script src="./app.js"></script> </body> </html> css:

Answer 2

you can use -webkit-appearance: none; , background: linear-gradient()

 const range = document.querySelector('#range') range.addEventListener('input', function () { const bg = getComputedStyle(this).getPropertyValue('--background'); const slider = getComputedStyle(this).getPropertyValue('--slider'); range.setAttribute( 'style', ` background:linear-gradient(to right,${slider},${slider} ${this.value}%,${bg} ${this.value}%) ` ) })

 #range { --background: green; --slider: red; background: var(--background); -webkit-appearance: none; }

 <input id="range" type="range" min="0" max="100" value="0" />