CODEWITHSUNDEEP
html
Optiq
Optiq

Reputation: 3182

How can I get numbers to show up above my range input rather than the ticks?

I want to add numbers above my input slider and so far all I've been able to find is a snippet that shows notches. I've seen range inputs before with numbers on them so I know it has to be possible, but can't find any info on it.

Is this something I can do directly with coding attributes to the input or will I have to use divs to position them where I want them?

so far the code I have for it is

<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>

I wanted to add a jsfiddle but they've updated things and I can't find the link to share it.

Upvotes: 0

Views: 142

Answers (1)

kuldeep.kamboj
kuldeep.kamboj

Reputation: 2606

I dont know if it is native possible. But you can always use javascript/css to achieve

<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>

Upvotes: 1

Related Questions