5

私のウェブサイトで NoUiSlider JS プラグインを使用しました。これにより、ユーザーはスライダーを使用して予算を選択できるようになりました。これは素晴らしいことですが、選択した値を連絡先/見積もりフォームの一部として含めたいと考えています。

NoUiSlider パーツから値を置き換える必要があると思われる非表示フィールドをフォームに追加しました。

これが私のコードです、何かアイデアはありますか?

<div id="slider-range"></div>

<div id="budget_value">
    &pound;<div id="slider-range-value"></div>
</div>

<input type="text" name="budget" value="" id="budget" class="hid"/>

<script>
    var rangeSlider = document.getElementById('slider-range');
    noUiSlider.create(rangeSlider, {
        start: [ 1500 ],
        step: 250,
        range: {
            'min': [  0 ],
            'max': [ 10000 ]
        }
    });
    var rangeSliderValueElement = document.getElementById('slider-range-value');
    rangeSlider.noUiSlider.on('update', function( values, handle ) {
        rangeSliderValueElement.innerHTML = values[handle];
    });
</script>

よろしくリアム

4

1 に答える 1

5

まず、隠し入力タイプがあります。

<input type="hidden" name="budget" value="" id="budget-input" />

次に、次のように値を設定します。

var budgetInput = document.getElementById('budget-input');

rangeSlider.noUiSlider.on('update', function( values, handle ) {
    rangeSliderValueElement.innerHTML = values[handle];
    budgetInput.value = values[handle];
});
于 2015-10-27T12:55:56.050 に答える