Get jQuery 2 sliders range values to Angularjs

Question

I am trying to implement a 2 sliders range input using jQuery

But I am not able to get the data of the range in angularjs

How I implement my slider:

In the HTML:

<p>
  <label for="thresholdRange">Score threshold:</label>
  <input type="text" ng-model="threshold" ng-change="change()" id="thresholdRange" readonly>
</p>
<div id="slider-range" style="margin-left: 1%; width: 50%"></div>
<br/><br/>

In the javascript:

$( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 100,
      values: [ 25, 100 ],
      slide: function( event, ui ) {
        $( "#thresholdRange" ).val(ui.values[ 0 ]/100 + " - " + ui.values[ 1 ]/100);
        console.log("Update minValue");
        $('[ng-controller="ValidationCtrl"]').scope().minValue = ui.values[ 0 ];
        var minValue = ui.values[ 0 ];
        console.log($('[ng-controller="ValidationCtrl"]').scope().minValue);

        var appElement = document.querySelector('[ng-app=validationApp]');
        var $scope = angular.element(appElement).scope();
        $scope.$apply(function() {
            $scope.minValue = ui.values[ 0 ];
        });
      }
    });
    $( "#thresholdRange" ).val( $( "#slider-range" ).slider( "values", 0 )/100 +
      " - " + $( "#slider-range" ).slider( "values", 1 )/100 );
  } );

It should trigger a js function (defined using ng-change) to get the 2 sliders range values:

var validationApp = angular.module('validationApp', []);   
validationApp.controller('ValidationCtrl', function ($scope, $window) {
  $scope.change = function() {
    $scope.minValue = $scope.threshold[0]
    $scope.maxValue = $scope.threshold[1]
  };
});

But this function is never triggered.

How I implement the table to be filtered

<tr ng-repeat="alignment in alignmentJson" ng-if="alignment.score >= minValue">  
  <td><input type="text" id="{{alignment.index}}" name="index" value="{{alignment.index}}" style="display: none;" readonly>{{alignment.index}}</input></td>
  <td><input type="text" id="{{alignment.score}}" name="score" value="{{alignment.score}}" style="display: none;" readonly>{{alignment.score}}</input></td>
<tr/>

So I think I need to get the value of the 2 sliders range to a ng-model to use it to filter the table

As anyone an idea why the ng-change function is not triggered? Or any advice to get the input value to angular controller. Thanks!

Resolved using the following implementation: https://jsfiddle.net/ValentinH/954eve2L/ Thanks to Shashank Vivek

why to use jquery with Angular, u know its not a recommended approach. Try the angular slider like: jsfiddle.net/ValentinH/954eve2L — Shashank Vivek
– Shashank Vivek, Commented Jul 18, 2016 at 13:57

vemonet · Accepted Answer · 2016-07-18 17:49:15Z

1

Resolved using the following implementation that use rzSlider: https://jsfiddle.net/ValentinH/954eve2L/

<h2>Range slider</h2>
Min Value:
<input type="number" ng-model="minRangeSlider.minValue" />
<br/>Max Value:
<input type="number" ng-model="minRangeSlider.maxValue" />
<br/>
<rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider>

answered Jul 18, 2016 at 17:49

vemonet

339 bronze badges

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

Collectives™ on Stack Overflow

Get jQuery 2 sliders range values to Angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related