【jquery】【javascript】slider同士の値を比較すると挙動がおかしかった

sliderの値を比較しようとしたとき。
<input id="slider1" type="range" min="0" max="100" step="1" value=100 />
<input id="slider2" type="range" min="0" max="100" step="1" value=20 />

slider1value = $("#slider1").val();
slider2value = $("#slider2").val();

if(slider1value >= slider2value)
{
 alert("slider1はslider2以上である");//こちらを期待
}else
{
 alert("slider1はslider2未満である");//こちらが出てくる
}

理由は、val()は文字列で返されるのを忘れていたから。
alert(typeof slider1value);//string

つまり、
alert("20">"100");//true
これと同じことをしてた。

rangeスライダーだからってわけじゃないけど、頭から消えていました。

こうすると、うまくいく
slider1value = $("#slider1").val()-0;
slider2value = $("#slider2").val()-0;

slider1

slider2

slider1:

slider2:

文字列で比較：slider1 slider2

数値で比較：slider1 slider2