隐藏jQuery中的滑块输入框

我有这个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" />

它呈现这样的： enter image description here

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

这怎么办？

来源

2012-01-18 Chakradhar

如果你只是想摆脱上/下箭头，你可以用输入与指定宽度/高度和overflow : hidden元素：

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

或者正如弗雷德里克·哈米迪说，你可以只隐藏元素一起，只有一个滑块是可见的。

这里是上面的代码演示：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; 
}

来源

2012-01-18 16:58:27 Jasper

与CSS的.ui滑块输入{ 显示完成：无重要; }它为我工作 – Chakradhar 2012-01-19 09:05:23

谢谢Jasper - “！重要”部分实际上是关键，否则它不起作用。（在Chrome中，至少） – Anthony 2012-03-12 03:37:38

@贾斯珀，很好的回答....另外，如果我想要显示输入框高于滑块在中心？ – 2014-07-18 06:34:11

可以隐藏手动输入控制：

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

来源

2012-01-18 15:35:55

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

来源

2012-01-26 22:08:50 TMB

如果你只是想摆脱向上/向下箭头的使用type="text" data-type="range"

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

来源

2012-12-02 11:51:44

当您使用CSS方法它这样做，你可以把输入提交其他人。因此，将class="ui-hidden-accessible"类添加到输入以隐藏它。

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

您的方法是正确的。但是您需要将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

来源

2013-07-18 07:00:41 Praveen

该解决方案的问题在于它仍然保留左侧的空间（即使输入框已隐藏）。 – Muis 2014-03-27 15:07:37

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

但看看那anoy偏移

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

来源

2014-03-27 22:00:20 Seyacat

实际显示旧代码，然后在其中进行适当编辑的新代码会更有帮助。 – Kevin 2014-03-27 22:24:38

我想这样做，但我却也希望空间消失。我以这种方式完成了这个工作（我正在使用范围滑块）：

<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号码添加到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 
}

我做的这一切都为一个更大的问题，这是我想使用的时间，而不是数字的范围滑块的一部分，所以我替换的带有标题的元素可以通过函数更改以显示时间。

这可能不是一个完美的选择，但我没有看到哪里能找回空间，所以我想我会把它放在这里。

来源

2015-01-02 20:57:40 Jeffeb3

可以去掉输入滑块如下：

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


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

来源

2015-06-28 10:52:41 Novin

隐藏jQuery中的滑块输入框

回答

相关问题