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" />