0

I am building a calculator in angularjs as a wordpress php plugin. Passing parameters as variables via a shortcode. I have a jquery ui-slider with min, max and step values set by passed params: 

<div ui-slider="{range: 'min'}" min="{$this->weight_minimum}"
     max="{$this->weight_maximum}" step="{$this->weight_increment}"
     ng-model="weight">
</div>

I also added two radio buttons after the slider:

<div class="user-selection">
    <label class="radio-container">{{ "Pounds" | translate }}
      <input type="radio" checked="checked" name="radio"
             ng-model="selection" value="lbs">
      <span class="checkmark"></span>
    </label>
    <label class="radio-container">{{ "Kilograms" | translate }}
      <input type="radio" name="radio" ng-model="selection" value="kg">
      <span class="checkmark"></span>
</label>
</div>

How can I change min/max values of the slider based on radio selection? I tried using ng-if but that is for showing/hiding html. I also tried adding an if statement in the app.controller with no success.

if ($scope.selection == 'lbs') {
  weight_maximum = $this->weight_maximum;
} else if ($scope.selection == 'kg') {
  weight_maximum = $this->weight_maximum / 2.2;
}
georgeawg
  • 48,608
  • 13
  • 72
  • 95
GeorgeP
  • 784
  • 10
  • 26
  • Possible duplicate of [Selected value in radio button group not retained in angularjs](https://stackoverflow.com/questions/48403158/selected-value-in-radio-button-group-not-retained-in-angularjs) – Rafael Herscovici Mar 28 '19 at 11:47
  • Your problem mixes too many things: jQuery, AngularJS, PHP, JavaScript, WordPress, ui-slider, radio buttons, etc. Try doing one step at a time. Getting jQuery ui-slider to work with AngularJS ng-model is one step. Passing Wordpress shortcode parameters to AngularJS is another. Changing min max values with radio buttons is yet another. I am tempted to vote to close this question as "too broad" or lacking a "Minimal, Complete, Verifiable example". – georgeawg Mar 28 '19 at 17:28
  • There are about 700 lines of code in just this file alone and the whole plugin is made up from a dozen of php files like this one. Yes, it has all those things in it and works great. I did not ask about passing parameters. I did not ask about jQuery ui-slider. I wanted to add the option for the user using radio buttons and I isolated the lines that had something to do with my question. My question was very specific. Sorry if that is too broad for you. – GeorgeP Mar 29 '19 at 00:38

1 Answers1

1

Use ng-change event example in the plunker Code : html

  <div class="user-selection">
    <label class="radio-container"> Pounds
      <input type="radio" checked="checked" name="radio" ng-change="changUnit()" ng-model="selection" value="lbs">
      <span class="checkmark"></span>
    </label>
    <label class="radio-container"> Kilograms
      <input type="radio" name="radio" ng-model="selection" value="kg" ng-change="changUnit()">
      <span class="checkmark"></span>
    </label>
  </div>

  <div>Min : {{weight_minimum}}</div>
  <div>Max : {{weight_maximum}}</div>
  <div>slider value : {{weight}}</div>
  <br/>
  <br/>


  <div ui-slider min="{{weight_minimum}}" max="{{weight_maximum}}" step="{{weight_increment}}" ng-model="weight">
  </div>

your controller : 


    var app = angular.module('plunker', ['ui.slider']);

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

      $scope.selection = 'kg'
      $scope.weight_minimum = 10;
      $scope.weight_maximum = 1000;
      $scope.weight_increment = 1;
      $scope.weight = 50;

      $scope.changUnit = function() {
        if ($scope.selection == 'lbs') {
         $scope.weight_maximum = $scope.weight_maximum * 2.2;
        } else if ($scope.selection == 'kg') {
          $scope.weight_maximum =  $scope.weight_maximum / 2.2;
        }

      };
    });
Wasef Anabtawi
  • 1,011
  • 1
  • 10
  • 17
  • Thank you for taking the time to set up an example at Plunker. This is exactly what I was looking for, works great. – GeorgeP Mar 29 '19 at 01:05