AngularJS slider range value is not displaying on it?

Question

I am trying to implement AngularJS slider bar from Google search, I can bale to filter it out based on my slider selection, but I am unable to display the it's minimum and maximum range values at the starting and ending of the slider bar(on top or at starting/ending places of slider bar).

Like sample:

If I give like: <slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound"></slider>, then my slider is filtering fine(of course it won't show any range values on top of slider bar)

But If I give like: <slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound" ng-model="itemrange.maxvalue"></slider> then my filtering is not working based on my slider moving/selection, I hope this time it also should show the range values(at starting and ending places of slider bar, but it's not happening ?, here we are adding: ng-model="itemrange.maxvalue")

Fiddle is available.

html:

<body ng-controller='PriceCtrl'>
    <slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound" ng-model="itemrange.maxvalue"></slider>
    lower_price_bound: <strong>{{lower_price_bound}}</strong>
    &nbsp;
    upper_price_bound: <strong>{{upper_price_bound}}</strong>
    <hr>
    <table border="1">
      <thead>
        <th>Name</th>
        <th>Min Price</th>
        <th>Max Price</th>
      </thead>
      <tbody>
        <tr ng-repeat='item in items|filter:priceRange'>
          <td>{{item.name}}</td>
          <td>{{item['min-acceptable-price']}}</td>
          <td>{{item['max-acceptable-price']}}</td>
        </tr>
      </tbody>
    </table>

  </body>

app.js:

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

app.controller('PriceCtrl', function ($scope){

    $scope.itemrange = {
    maxvalue: 50
  };

  $scope.items = [{name: "item 1", "min-acceptable-price": "10",
                  "max-acceptable-price": "50"},
                  {name: "item 2", "min-acceptable-price": "5",
                  "max-acceptable-price": "40"},
                  {name: "item 3", "min-acceptable-price": "15",
                  "max-acceptable-price": "30"}];

  $scope.lower_price_bound = 0;
  $scope.upper_price_bound = 50;

  $scope.priceRange = function(item) {
    return (parseInt(item['min-acceptable-price']) >= $scope.lower_price_bound && parseInt(item['max-acceptable-price']) <= $scope.upper_price_bound);
  };
});

Please let me know where and what I am doing wrong ? Thanks in advance.

Kaedeko · Accepted Answer · 2016-07-04 11:00:43Z

1

By using the "ng-model" parameter you are overriding the previous two model parameters.

For selection of a range, you only need the "ng-model-low" and "ng-model-high" parameters.

If you want to show the currently selected values above the sliders, that will require some custom CSS (possibly similar to this)

For a "quick and easy" solution, use something like angularjs-slider.

edited Jul 4, 2016 at 11:00

answered Jul 4, 2016 at 10:42

Kaedeko

4825 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Dhana Over a year ago

thanks for your reply, then how can I display those minimum/maximum values on top of my slider ? Could I know please ?

Kaedeko Over a year ago

Just edited that into my answer. You'll need to use some custom HTML and CSS to style your sliders to display those values - to my knowledge it doesn't form part of the default style. The example I've provided is just a first-google-result link, and uses JQuery, but it should give you the general idea of what you need to do.

Dhana Over a year ago

I don't want to display any selected values above the slider, I just need to display my low and high vales on top of slider, like: plnkr.co/edit/jOk6GmUdzOu99xJqQ0wU?p=preview

Kaedeko Over a year ago

The plnkr you've linked is using a custom library, found here. Unfortunately it's now deprecated, but there are alternatives, including this one, which is where your screenshot in the question comes from.

Kaedeko Over a year ago

The quickest way to go would be to use the angularjs-slider library that I linked above, save yourself the trouble. Otherwise it's the custom CSS route.

|

Collectives™ on Stack Overflow

AngularJS slider range value is not displaying on it?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related