滑块结束时隐藏输入值

Question

我使用JQuery UI SLider作为价格范围滑块。

我想在加载页面上默认隐藏值，当用户滑动滑块时，它应该在输入字段中显示值，但在达到最大值和最小值后，它应该再次隐藏输入值。

滑块代码：

$("#price-slider").slider({
    range: true,
    animate: true,
    min: 1000,
    max: 500000,
    values: [1000, 500000],
    create: function(event, ui) {
        valtooltip($(this), ui);
    },
    slide: function(event, ui) {
        valtooltip($(this), ui);
        $("#amountx").val("" + ui.values[0] + "-" + ui.values[1]);
    },
    stop: function(event, ui) {
        valtooltip($(this), ui);
        $("#amountx").focus();
    }

});

这是HTML：

<div class="col-md-4 slider-lbl">
     <div class="spacer-b15">
        <label for="amountx">Price range:</label>
            <input type="text" name="pprice" id="amountx" class="slider-input" onfocus="return getFinderData();">
     </div>
</div>
<div class="col-md-8 slider-cntnt">
     <div class="col-md-12">
         <div class="slider-wrapper black-slider">
            <div id="slider-range"></div>
         </div>
     </div>
</div>

截图：

Answer 1

在你的滑块对象中，有一个名为＆＃34; slide（）＆＃34;的方法。因此，在此方法中，您可以检查幻灯片值是否为最大值和最小值。然后你可以显示或隐藏它。

会是这样的;

n=9
A=[1 3 5 7 9 11 13 15 17]';
B=[2 4 6 8 10 12 14 16 18]';
C=[1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18]';

我无法对其进行实际测试，所以如果它能够正常工作，请随时更新。