Text box for the range

Asked

Viewed 91 times

-1

Hello, my application is in Angularjs and I’m also using materialize. I would like to create a range but next to it put an input that when I type the data the range changes with the value of the data I typed.

<div class="col s12 m10 l11" id="ramMemory-range">
    <div class="range-field ">
        <label>
            <span class="left">1GB</span><span class="right">64GB</span>
            <input type="range" name="ramMemory" id="ramMemory" min="1" max="64" class="validate" data- 
             error="#ramMemory-range" ng-model="server.ramMemory" required/>    
        </label>

    </div>
    <input type="text" name="valorRange">
</div>
javascript html html5 angularjs css3

  • and what is the difficulty/doubt/problem?

  • I just wish I knew how I would do it... I have no idea... I’m a beginner. Pdeira put an example?

  • creates a model value for input, then creates a Function that will be triggered for example with ng-change input, which takes the input value and arrow in the range model

  • Can the input ng-model match the range? While I can change the range manually, I can change it in the input, which means it will receive the input value. After that I have save by sending so to the api and the bank

1 answer

0

Turned out like this: 

<div class="row" style="margin-bottom:2rem">
        <div class="col s12 m2 l1">
            <span>RAM Memory: </span>
        </div>
        <div class="col s12 m10 l11" id="ramMemory-range">
            <div class="range-field ">
            <label>
                <span class="left">1GB</span><span class="right">64GB</span>
                <input type="range" name="ramMemory" id="ramMemory" min="1" max="64" class="validate" data-error="#ramMemory-range" ng-model="server.ramMemory" required/>

            </label>

            </div>

        </div>
        <input type="text" ng-model="server.ramMemory" ng-change="valorRange(server.ramMemory)">
    </div>


$scope.valorRange = function(teste){
    $scope.server={
        ramMemory: teste

    }
}

When I change the value through the range the input receives that value and changes according to the value received from the range. When I try to change the value through input, it gives error:

inserir a descrição da imagem aqui

  • Ahh found... Just have to change the input type to number

  • either that or convert to number ;)

Browser other questions tagged javascript html html5 angularjs css3

You are not signed in. Login or sign up in order to post.