Home Get the value of a range input slider as a string value
Reply: 1

Get the value of a range input slider as a string value

J.Do
1#
J.Do Published in 2017-12-07 21:38:26Z

I have a slider with a label on each end. Is it possible to have the value of the slider to be the text/label?

<label for="good">Good</label>
<label for="bad">Bad</label>
<input id="slider" type="range" class="slider" min="1" max="100"/>

I know it could be done this way:

if(value less than certain amount)
{
   variable = "bad";
}

But this would mean I would have multiple statements of this. Is there an easier way of doing this?

Zooly
2#
Zooly Reply to 2017-12-11 08:53:58Z

I would do something like this:

var app = angular.module('demoApp', []);

app.controller('demoCtrl', function($scope){
  $scope.getText = function(){
    if($scope.slider > 50){
      return "Good";
    } else {
      return "Bad";
    }
  }
});

Call this function in interpolation curly brackets in your view:

  <span>{{slider}}</span>
  <input ng-model="slider" type="range" min="1" max="100"/>
  <label>{{getText()}}</label>

getText function will return Bad or Good according to slider value.

DEMO

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.436003 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO