2015-01-06 12 views
7

正の最小値と負の最大値を許可する方法はありますか?私は、ログスペース(10^8-10-13)にスライダーを作成しようとしており、スライダーに指数部を表示したい。HTML5入力タイプの範囲は正から負へ

<input type="range" min="8" max='-13' value="1" step="-1" id="myRange" > 

これは現在、デフォルトのmax=100値に戻ります。

または、何らかの方法でスライダを元に戻すことはできますか?どんな助けでも大歓迎です。

編集:縮尺を8から-13(ログスペース10^8-10^-13)にすることを覚えておいてください。

EDIT:IDL xr = [8、-13](またはR xlim = c(8、-13))です。最小値は正で、最大値は負の数であることに注意してください。私は、入力の種類の範囲で同じ動作を作成するための回避策について助けを求めています。

+5

あなたは私たちに8よりも大きいと-13未満の番号を伝えることができますか?この作業を行うにはmin maxの値を入れ替えてください。 –

+0

Lolz男-13が8より小さい場合、min = ' - 13'と 'max =' 8 ''を入れてください – madforstrength

+0

おそらく私は明確ではありませんでした。私はスケールを8から始めて-13に減らしたい。 – Liz

答えて

4

あなたは、単に-1によって制限し、複数の値を切り替えることができます:あなたが提出される値が必要になります場合は隠しフィールドにコピーし、

<input type="range" min="-8" max='13' value="1" step="-1" id="slider" > 

$('#slider').change(function(){ 
    var val = -+($(this).val()); 
    console.log(val); 
}); 

を、そして使用することを元のサーバー側ではなくサーバー側で実行します。

A live demo at jsFiddle

0

論理的に満足できない条件を追加しました。あなたはスライダーを機能させるために最小値と最大値を交換する必要があります。

<input type="range" min="-13" max='8' value="1" step="1" id="myRange" > 

Working Demo

+0

縮尺を8から-13に減らしたい(最小=縮尺の左側)。問題は誰でも回避策を提案できるかどうかです。 step = -1は助けにはならない(絶対ステップ値をインクリメントする) – Liz

4

このスライダは逆になります:分(左)8であるとmax(右)は-13で、私はこれがあなたが望むものだと思ってください...そして、ステップ= -1はうまくいきません。

HTML:

<input type="range" min="-13" max="8" value="1" step="1" id="range"/> 

CSS:

#range{ 
    transform: rotateY(180deg); 
} 

たTHX CSS!

+0

ありがとうPierre!私には良い見えます、それはすばらしくシンプルです!私はサイトの残りの部分で遊んで、私が受け入れる前にそれが良いものかどうかを見ていきます。 – Liz

+0

私は多くのブラウザ/バージョンで徹底的なテストをしなければ、これに頼るつもりはありません。どこかで問題になることは限られています。 –

+0

あなたが互換性を探しているなら、それはスライダー入力をサポートしています。すなわち、ie9という接頭語とie10ユニバーサル:[w3schools.com/cssref/css3_pr_transform.asp](http://www.w3schools.com/cssref/css3_pr_transform .asp) –

0

私は正の最小値と負の最大値を許可する方法はないと考えていますが、与えられた場合にはmin = -8とmax = 13を使用でき、変更すると変数の範囲値の負値を割り当てます。例えば、

<script> 
var exponent=1; 
</script> 
<input type="range" min="-8" max='13' value="-1" step="1" id="myRange" onchange="document.exponent = - this.value;"> 
1

ステップ1でスライダを0から21までスケールします。

変更ハンドラでは、8 - $(this).val()を計算して、実際に必要なスケーリングを与えます。

HTML

<input type="range" min="0" max='21' value="7" step="1" id="myRange"> 

Javascriptを

$('#myRange').change(function() { 
    var scaledValue = 8 - $(this).val(); 
    console.log(scaledValue); 
}); 

DEMO

関連する問題