input type="slider"に対応したブラウザか否かに応じて処理を分岐したい

現在、input type="slider"とするとスライダーを使えるブラウザ(Chrome,Safari,Operaなど)と使えないブラウザ(IE,FireFoxなど)を判別し、
それぞれに最適化された表示となるよう切り替えたいというケースがあります(私はありました)
そういった場合、navigator.userAgentの内容によりブラウザで判定してしまうと、将来的に例えばFireFoxにinput type="slider" が実装されたりした場合にもったいないです。
ベストな方法はinput type="slider"が使えるか否かでの分岐です。
次のような構文で判別可能です。
1. input要素をJSで作る
2. 1で作った要素にtype属性"slider"を追加する
3.sliderに対応しないブラウザではtype属性にtextが代替される
4.この要素のinput type="slider"かinput type="text"かを調べる

具体的にはこんな感じです。

$(function(){
  var i = document.createElement("input");
  i.setAttribute("type", "range");
  var rangeNotSupported = (i.type === "text");
  delete i;
  if(rangeNotSupported) {
    alert('残念ながら、お使いのブラウザは、スライダーが使えませんので、テキストで表示します');
  }
  else {
    alert('お使いのブラウザは、スライダーが使えますよぉ！！！ぐりぐり動かしちゃってください');
}
});

サンプルはこちら
http://jsdo.it/dentaq/bIIk