0

範囲スライダーを組み込んで値 (この場合は年間走行距離) を設定し、その値を取り、設定された定数 (0.05) を掛けて、単位は英ポンド (£) で、小数点以下 2 桁の精度で適切に丸められた 2 番目のフォーム フィールドになります。No UI Slider ( http://refreshless.com/nouislider/ )というスライダーを使用しており、ここで基本的な要素を設定しています。

$("#sliderAnnualMileage").noUiSlider({
start: [ 0 ],
step: 1000,
range: {
'min': [ 0 ],
'max': [ 120000 ]
 },
connect: "lower",
serialization: {

lower: [

  $.Link({
    target: $("#mileage"),
    format: {
      thousand: ',',
      decimals: 0,
      postfix: ' miles'
     }
    })
  ]
 }
});

これは、部分的に機能する JS Fiddle です: http://jsfiddle.net/highlander/jMA98/1/ あなたの洞察や経験は大歓迎です。

4

2 に答える 2

0

何らかの理由で、スライダーが値をリセットします。

http://jsfiddle.net/jMA98/2/

$('#mileage').on('change',function(){
    console.log($(this).val().replace(' miles',''));
    $('#annualSavings').val($(this).val().replace(' miles','')*0.05);
});

それ以外はこれで動作します。

于 2014-06-17T14:25:09.750 に答える
0

$.Linkフォーマット機能を使用して、2 番目の入力ボックスに別の値を設定できます。

lower: [
  // your one
  // then this:
  $.Link({
    target: $("#annualSavings"),
    method: function (val) {
        $(this).val("£" + (val * 0.05).toFixed(2));
    }
  })
]

これが結果です: http://jsfiddle.net/jMA98/3/

于 2014-06-17T14:27:09.910 に答える