Question

我在我的页面中使用jquery范围滑块。范围滑块显示它的范围从0到100.我需要的是，只有这个范围应显示在td标签内，如

<td><input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range"></td>

但它没有以这种方式工作。

JSFIDDLE

Answer 1

rangelider已经响应，因为它会自动调整屏幕宽度。如果您只想控制滑块轨道与左右输入之间的距离，可以使用CSS执行此操作，如下所示：

.ui-rangeslider .ui-rangeslider-sliders {
    margin-left: 86px;
    margin-right: 86px;
}

在您的小提琴中，默认边距为68px。我把它增加到86px。

<强> DEMO

注意：如果您想在不同的屏幕宽度上使用不同的边距，则可以在CSS中使用媒体查询。

Answer 2

试试这个：

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>jQuery Mobile Example</h1>
     </div>
      <table style="width:100%;">
            <tr>
                <td style="width:20%;"><label>Rangeslider:</label></td>
                 <td>
                     <div data-role="rangeslider">
                         <input name="range-1a" id="range-1a" min="0" max="100"  value="0" type="range">
                          <input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range"></div></td>
             </tr>
    </table>

</div>

如何在td中显示jquery范围滑块输入字段？

2 个答案: