Em Browsers **webkit** vc pode trabalhar com essas classes:

    ::-webkit-appearance: ;
    ::-webkit-slider-runnable-track ;
    ::webkit-slider-thumb ;

*Aqui tem um artigo de referência* http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html (em inglês)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    body {
        padding: 30px;
    }
    input[type=range] {
        /*removes default webkit styles*/
        -webkit-appearance: none;
        
        /*fix for FF unable to apply focus style bug */
        border: 1px solid white;
        
        /*required for proper track sizing in FF*/
        width: 300px;
    }
    input[type=range]::-webkit-slider-runnable-track {
        width: 300px;
        height: 5px;
        background: #ddd;
        border: none;
        border-radius: 3px;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: goldenrod;
        margin-top: -4px;
    }
    input[type=range]:focus {
        outline: none;
    }
    input[type=range]:focus::-webkit-slider-runnable-track {
        background: #ccc;
    }

    input[type=range]::-moz-range-track {
        width: 300px;
        height: 5px;
        background: #ddd;
        border: none;
        border-radius: 3px;
    }
    input[type=range]::-moz-range-thumb {
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: goldenrod;
    }

    /*hide the outline behind the border*/
    input[type=range]:-moz-focusring{
        outline: 1px solid white;
        outline-offset: -1px;
    }

    input[type=range]::-ms-track {
        width: 300px;
        height: 5px;
        
        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
        background: transparent;
        
        /*leave room for the larger thumb to overflow with a transparent border */
        border-color: transparent;
        border-width: 6px 0;

        /*remove default tick marks*/
        color: transparent;
    }
    input[type=range]::-ms-fill-lower {
        background: #777;
        border-radius: 10px;
    }
    input[type=range]::-ms-fill-upper {
        background: #ddd;
        border-radius: 10px;
    }
    input[type=range]::-ms-thumb {
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: goldenrod;
    }
    input[type=range]:focus::-ms-fill-lower {
        background: #888;
    }
    input[type=range]:focus::-ms-fill-upper {
        background: #ccc;
    }

<!-- language: lang-html -->

    <input type="range">

<!-- end snippet -->

**Com CSS e cor na Barra**

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    input[type=range] {
      -webkit-appearance: none;
      margin: 10px 0;
      width: 100%;
    }
    input[type=range]:focus {
      outline: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 12.8px;
      cursor: pointer;
      animate: 0.2s;
      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
      background: #ac51b5;
      border-radius: 25px;
      border: 0px solid #000101;
    }
    input[type=range]::-webkit-slider-thumb {
      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
      border: 0px solid #000000;
      height: 20px;
      width: 39px;
      border-radius: 7px;
      background: #65001c;
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -3.6px;
    }
    input[type=range]:focus::-webkit-slider-runnable-track {
      background: #ac51b5;
    }
    input[type=range]::-moz-range-track {
      width: 100%;
      height: 12.8px;
      cursor: pointer;
      animate: 0.2s;
      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
      background: #ac51b5;
      border-radius: 25px;
      border: 0px solid #000101;
    }
    input[type=range]::-moz-range-thumb {
      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
      border: 0px solid #000000;
      height: 20px;
      width: 39px;
      border-radius: 7px;
      background: #65001c;
      cursor: pointer;
    }
    input[type=range]::-ms-track {
      width: 100%;
      height: 12.8px;
      cursor: pointer;
      animate: 0.2s;
      background: transparent;
      border-color: transparent;
      border-width: 39px 0;
      color: transparent;
    }
    input[type=range]::-ms-fill-lower {
      background: #ac51b5;
      border: 0px solid #000101;
      border-radius: 50px;
      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    }
    input[type=range]::-ms-fill-upper {
      background: #ac51b5;
      border: 0px solid #000101;
      border-radius: 50px;
      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    }
    input[type=range]::-ms-thumb {
      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
      border: 0px solid #000000;
      height: 20px;
      width: 39px;
      border-radius: 7px;
      background: #65001c;
      cursor: pointer;
    }
    input[type=range]:focus::-ms-fill-lower {
      background: #ac51b5;
    }
    input[type=range]:focus::-ms-fill-upper {
      background: #ac51b5;
    }

    body {
      padding: 30px;
    }


<!-- language: lang-html -->

    <input type="range">

<!-- end snippet -->

Porém parece que a barra é mais complicado para mudar pelo CSS. Nesse caso tem opção com JS.

http://jsfiddle.net/JnrvG/1/

**E aqui vc pode criar plugins costomizados**

http://danielstern.ca/range.css/?ref=css-tricks#/