在jquery中隐藏滑块输入框

Question

我正在使用jquery Mobile 1.0。

我有这个HTML代码。

<label for="slider" class="ui-hidden-accessible">
    Input slider:
</label>
<input type="range" name="slider"   id="@(Model.QuestionNo)_slider" value="25" min="0" max="100" />

它的呈现方式如下：

但我想删除红色标记的部分。我只想显示滑块部分。

如何做到这一点？

Answer 1

如果您只想摆脱向上/向下箭头，可以将输入包装在具有指定宽度/高度的元素中overflow : hidden：

$(".ui-slider-input").wrap($('<div />').css({
    position : 'relative',
    display  : 'inline-block',
    height   : '36px',
    width    : '45px',
    overflow : 'hidden'
}));

或者正如Frederic Hamidi所说，你可以将元素全部隐藏在一起，只有一个滑块可见。

以上是上述代码的演示：http://jsfiddle.net/EWQ6n/1/

此外，您可以使用CSS隐藏输入元素（这很好，因为您不必像使用JS一样执行CSS）：

.ui-slider-input {
    display : none !important;
}

以下是使用CSS的演示：http://jsfiddle.net/EWQ6n/2/

<强>更新

除了使用!important关键字，您还可以制定更具体的CSS规则，以便在jQuery Mobile类中使用它。一个例子是：

.ui-mobile .ui-page .ui-slider-input,
.ui-mobile .ui-dialog .ui-slider-input {
    display : none;
}

Answer 2

input.ui-slider-input {
  display: none;
}

Answer 3

您可以手动隐藏输入控件：

$("#yourPage").live("pageinit", function() {
    $(".ui-slider-input").hide();
});

Answer 4

如果您只想摆脱向上/向下箭头，请使用type="text" data-type="range"

<input type="text" data-type="range" name="slider" id="@(Model.QuestionNo)_slider" value="25" min="0" max="100" />

Answer 5

我也想这样做，但我也想让空间消失。我这样做了（我正在使用范围滑块）：

<div data-role="rangeslider" data-mini="true" class="no-number">
    <input type="range" name="Morn"  id="Morn"  data-mini="true" value="720" min="0" max="1439">
    <input type="range" name="Night" id="Night" data-mini="true" value="10800" min="0" max="1439">
</div>

注意我将.no-number添加到div。

然后在css：

/* Used to remove the number next to the slider.*/
.no-number .ui-slider-input
{
    display : none;
    width: 0px;
}

/* Used to remove the space where the number was. */
.no-number .ui-rangeslider-sliders
{
    margin: 0 5px; !important
}

我这样做是为了一个更大的问题的一部分，我正在尝试使用范围滑块时间而不是数字，所以我用一个标题替换了这些元素我可以用一个函数来改变显示时间。

这可能不是一个完美的选择，但我没有看到将空间放回任何地方的位置，所以我想我会把它发布在这里。

Answer 6

当您使用CSS方法执行此操作时，您可能会破坏其他人的输入字段。因此，将class="ui-hidden-accessible"类添加到输入中以隐藏它。

从class="ui-hidden-accessible"删除此label。

您的方法是正确的。但您需要将class="ui-hidden-accessible"添加到input而不是label。

您的代码应该是这样的：

<label for="slider">Input slider:</label>
<input type="range" name="slider" id="@(Model.QuestionNo)_slider" 
   value="25" min="0" max="100"  class="ui-hidden-accessible"/>

选中此SAMPLE DEMO

Answer 7

<input type="range" name="slider_sodio" id="slider_sodio" value="0" min="0" max="3" step="1" class="ui-hidden-accessible"  />

但看起来那个偏移

.ui-slider-track {
    margin: 0 15px 0 68px;  ----> change to 10
}

Answer 8

您可以删除下面的输入滑块：

    input.ui-slider-input {
        display: none;
        width: 0;
    }


    .ui-slider-track {
        margin: 0 15px 0 15px !important;
    }