Firefox

このブラウザでは、::-moz-range-trackと::-moz-range-thumbの疑似要素を用います。

/* バーのカスタマイズ */
input[type="range"]::-moz-range-track {

    /* 背景色を指定 */
    background-color: #D3D8B0;

    /* 高さを指定 */
    height: 4px;

    /* 幅を指定 */
    width: 100%;
}

/* つまみのカスタマイズ */
input[type="range"]::-moz-range-thumb {

    /* 背景色を指定 */
    background-color: #D3D8B0;

    /* 枠を指定 */
    border: 1px solid #3A362D;

    /* 角の丸みを指定 */
    border-radius: 30%;

    /* 高さを指定 */
    height: 20px;

    /* 幅を指定 */
    width: 10px;
}

スライドバーは以下のような表示になります。

IE・Edge

これらのブラウザでは、::-ms-trackと::-ms-thumbを指定します。

/* input要素のtype="range"属性を指定 */
input[type="range"] {

    /* 要素内の余白を除去 */
    padding: 0;

    /* カーソルの表示をポインターに変更 */
    cursor: pointer;
}

/* バーのカスタマイズ */
input[type="range"]::-ms-track {

    /* 背景色を指定 */
    background-color: #D3D8B0;

    /* 枠を非表示 */
    border: none;

    /* 色を透過*/
    color: transparent;

    /* 高さを指定 */
    height: 4px;

    /* 幅を指定 */
    width: 100%;
}

/* つまみのカスタマイズ */
input[type="range"]::-ms-thumb {

    /* 背景色を指定 */
    background-color: #D3D8B0;

    /* 枠を指定 */
    border: 1px solid #3A362D;
}

デフォルトの装飾を取り除くために、バーのカスタマイズでborderを非表示に、colorを透過させてます。IEに関して、paddingが付いているのでこれも取り除きますが、それでもまだ他の要素と併記するとズレが生じています。

原因が不明なのでIEだけにCSSを適用して対処しています。

IEの判別

サイトではユーザーエージェントを利用して判定しています。以下はJavascriptのコードです。

//IEの判別
function checkIE() {

    //ユーザーエージェントの文字列を取得
    var str = window.navigator.userAgent.toLowerCase();

    //IEを示す文字列が含まれているかを判定
    if (str.search(/msie|trident/) !== -1){

        //html要素にクラスを付与
        $('html').addClass('ie');

        //playerオブジェクトに判定を保持
        player.ie = true;

        //IE9以下かどうかを判定
        if (str.indexOf('msie') !== -1 &&
            str.indexOf('msie 10') === -1) { 

            //プレーヤーの起動を無効
            player.disable = true;
        }
    }
}

//ページの読み込み時に処理が可能になれば実行
$(function() {
    checkIE();

    //他の処理は省略
    ・・・
});

window.navigator.userAgentでユーザーエージェントを取得し、toLowerCase()で小文字に変換します。例えばIE11であれば以下のような文字列が得られます。

mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729; rv:11.0) like gecko

IE10以下ではmsieの文字列が含まれますが、IE11には含まれていないので、代わりにtridentの文字列で判別します。Stringオブジェクトのメソッドであるsearch()は、引数に正規表現を指定し、マッチした場合はその箇所のインデックスを返し、そうでない場合は-1を返します。上記の例では、文字列msieとtridentのどちらかが含まれていれば、0以上の数値を返します。また、indexOf()も同様ですが、引数には正規表現でなく、マッチさせたい文字列を指定します。上記では、msieが含まれていればIE10以下であり、そこからIE10を除外するのに、msie 10の文字列で判定しています。
これによりhtml要素に付与したクラスieを用いて、CSSで以下のように調整を加えています。

/* IEのtype="range"属性を囲む要素の調整 */
.ie .player-block-seek {

    /* レイアウトを保持し位置を変更 */
    position: relative;

    /* 上からの距離を指定 */
    top: -2px;
}

上記によりIEのスライドバーは以下のように修正されます。

URL： ringil-music.com
ライブラリ： Bootstrap 3・JQuery 1.12.4