滑块结束时隐藏输入值答案

【问题标题】：Hiding input values when slider goes to end滑块结束时隐藏输入值
【发布时间】：2016-06-01 08:47:56
【问题描述】：

我正在使用 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>

截图：

【问题讨论】：

您能否发布您的相关 HTML 代码和范围滑块的屏幕截图？
我已经提交了HTM，截图，怎么解决？

标签： jquery slider

【解决方案1】：

在您的滑块对象中，有一个名为“slide()”的方法，因此在此方法中您可以检查滑块值是否为最大值和最小值。然后你可以显示或隐藏它。

应该是这样的；

$("#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]);
        if((ui.values[0] == 1000) && (ui.values[1] == 500000)){
          $("#amountx").hide();
        }else{
          $("#amountx").show();
        }
    },
    stop: function(event, ui) {
        valtooltip($(this), ui);
        $("#amountx").focus();
    }

});

我无法实际测试它，所以如果它可以工作，请随时更新。

【讨论】：

是的，它工作正常。我将把它应用到其他滑块上，我希望它在所有滑块上都能正常工作，非常感谢。