how to set max and min value to range slider at runtime

Question

unable to set maximum and minimum values of slider at run time here i am using ion range slider using angularjs tags in html this is my html code,

 <div class="range-slider"> //range slider class
            <div >
                <input type="text" class="js-range-slider"  />
            </div>
        </div>
        <div class="extra-controls">
        <input type="text" maxlength="4" value="{{miniPriceforFilter}}" class="inp js-from" />
        <input type="text" maxlength="4" value="{{maxPriceforFilter}}" class="inp js-to" />
    </div>

using this script in same page, can i set these javascript variables to angular variables,

    var $range = $(".js-range-slider"),
    $from = $(".js-from"),
    $to = $(".js-to"),   
    range,
    min = 0 ,
    max =1000 ,
    from,
    to;

    var updateValues = function () {
    $from.prop("value", from);
    $to.prop("value", to);
    };

    $range.ionRangeSlider({
    type: "double",
    min: min,
    max: max,
    prettify_enabled: false,
    grid: true,
    grid_num: 10,
    onChange: function (data) {
    from = data.from;
    to = data.to;        
    updateValues();
  }
  });

    range = $range.data("ionRangeSlider");

    var updateRange = function () {
    range.update({
    from: from,
    to: to
  });
};

    $from.on("change", function () {
    from = +$(this).prop("value");
    if (from < min) {
    from = min;
}
if (from > to) {
    from = to;
}

    updateValues();    
    updateRange();
    });

    $to.on("change", function () {
    to = +$(this).prop("value");
    if (to > max) {
    to = max;
    }
    if (to < from) {
    to = from;
    }

     updateValues();    
     updateRange();
    });
    </script>

need help!!

can you create a fiddle? – bipin patel Feb 15 '17 at 09:32 — bipin patel, Feb 15 '17 at 09:32

score 1 · Answer 1 · answered Feb 15 '17 at 10:29

Use Angular-slider

<div>
    <rzslider
         rz-slider-model="slider.value"
         rz-slider-options="slider.options"></rzslider>
</div>

var app = angular.module("app", ['rzModule']);
app.controller("ctrl", function($scope) {
  $scope.min=10;
  $scope.max=150;

  $scope.visSlider = {
    options: {
      floor: 0,
      ceil: 200,
      step: 1
    }
  };
  
  //$scope.changeValues = functio
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.0.1/rzslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.0.1/rzslider.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
Slider:
  <rzslider rz-slider-model="min" rz-slider-high="max" rz-slider-options="visSlider.options"></rzslider>
  
  <input type="text" ng-model="min">
  <input type="text" ng-model="max">
</div>

Fyi for future readers, you can also control elements of the slider as seen in the code of this question http://stackoverflow.com/q/42605685/5797593. Good luck! — Matt Goodrich, Mar 12 '17 at 09:43
@Nagaveer Gowda. Could you see this link plzzz.https://stackoverflow.com/questions/45350964/make-32-hrs-range-in-rzslider-in-angular-js — Varun Sharma, Jul 28 '17 at 12:35

how to set max and min value to range slider at runtime

1 Answers1