Question

我想在输入滑块上方添加数字，到目前为止我能找到的只是一个显示缺口的片段。我之前看过范围输入数字，所以我知道它必须是可能的，但是找不到任何信息。

这是我可以直接将输入编码属性做的事情，还是我必须使用div将它们放在我想要的位置？

到目前为止，我的代码是

<form>
    <input type="range" id="fader1" min="0" max="20" style="width:44%;" list="data1" value="0" step="1" oninput="outputUpdate(value)"/>
    <datalist id="data1">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
    </datalist>
    <output for="fader1" id="val1"></output>
    <script>
    function outputUpdate(val) {
document.querySelector('#val1').value = val;
}
    </script>
</form>

我想添加一个jsfiddle，但他们已经更新了东西，我找不到分享它的链接。

Answer 1

我不知道它是否可以原生。但是你总是可以使用javascript / css来实现

<style>
#fader1 {
    width: 400px; 
}
#a {
    text-align: right;

}

</style>
<form>
    <div id="a"><output for="fader1" id="val1"></output></div>
    <input type="range" id="fader1" min="0" max="20" list="data1" value="0" step="1" oninput="outputUpdate(value)"/>
    <datalist id="data1">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
    </datalist>

    <script>
    function outputUpdate(val) {
        document.querySelector('#a').style.width = (val*20) + "px";
        document.querySelector('#val1').value = val;
    }
    </script>
</form>

如何让数字显示在我的范围输入之上而不是刻度？

1 个答案: