简体   繁体   中英

Input type “range” - Set dynamic range

I'm looking for a way to set the minimum value of a input of type range equal to the value of a specific field.

At this moment, I have this:

These shown in a modal window

<div class="form-group">
    <label asp-for="NumDevices" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <input id="NumDevices" type="text" asp-for="NumDevices" class="form-control" />
        <input id="getNum" type="range" max="10" step="1" onchange="fetch()" class="form-control" />
    </div>
</div>

And this is my current JS:

<script>
    function getminimun() { 
        var minimun = document.getElementById("NumDevices").value;
        var shareminimun = Number(minimun);
        document.getElementById("getNum").min = shareminimun;
    }
</script>

Questions: I need to call my getminimun() function into my input of id: "getNum". How can I do that? Is there an onload option? onload="getminimun()"

Is it correct what I'm proposing? Can it be made better?

For any curious, this is my fetch() function:

<script>
    function fetch()
    {
        var get = document.getElementById("getNum").value;
        document.getElementById("NumDevices").value = get;
    }
</script>

Solved it like this:

Since I'm using a modal window to show these fields I added the following code in order to execute the Javascript once the modal opens.

<script>
    $(document).ready(function getminimun() {
        $('#modal-action-machine').on('shown.bs.modal', function () {
            var minimun = document.getElementById("NumDevices").value;
            var shareminimun = Number(minimun);
            document.getElementById("getNum").min = shareminimun;
            document.getElementById("getNum").value = shareminimun;
        });
    });
</script>

It was also needed to set the value of the "getNum" input type range for this particular case.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM