bind radio buttons with slider angularjs

stset Published at Dev

stset

Im trying to bind these radio buttons with the slider using angularjs. if the user chooses the radio centimeters radio button, then the slider should move dynamically to 10 and the textbox display 10, if pixels is chosen to 1 and so on. and it should start at 1(pixels)by default.

"use strict";

// Creates the "backend" logical support for appMyExample
var myModule = angular.module("appMyExample", []);

// define a function to create a new slider at locID (expected to be a div)
var createSlider = function (locID, label, guiModel) {
    var elm = document.getElementById(locID);
    elm.innerHTML = "<b>" + label + "</b><br>";
    elm.innerHTML += "Bar : <input type='range' min=\"1\" max='50' ng-model='" + guiModel + "'>";
    elm.innerHTML += "<input type='text' ng-model='" + guiModel + "' size='1'>";
};

// Now, call the GUI creation functions 

createSlider("idLeft", "LeftSlider", "mLeftModel");


myModule.controller("exCtrl", function ($scope) {
    $scope.mLeftModel = "1";
});

<body >
        <div ng-app="appMyExample" ng-controller="exCtrl" >
          <p><b>Unit:</b><input name='rad' type="radio" > Pixels (1)
                    <input name='rad' type="radio" > Millimeters (5)
                    <input name='rad' type="radio" > Centimeters (10)
                    <input name='rad' type="radio" > Meters (50)
          </p>
            <table>
                <tr>
                    <td>
                        <div id="idLeft" style="outline: 2px solid"> </div>
                    </td>
                </tr>
            </table>
                <label>    Total displacement:    <input type="text" value="{{mLeftModel}}" ></label>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </body>

thks

Mohit Tanwani

I think you should use ng-change for radio and based on that reinitialized your slider.

Don't forget to specify the ng-value to the radio button.

"use strict";

// Creates the "backend" logical support for appMyExample
var myModule = angular.module("appMyExample", []);

// define a function to create a new slider at locID (expected to be a div)
var createSlider = function (locID, label, guiModel) {
    var elm = document.getElementById(locID);
    elm.innerHTML = "<b>" + label + "</b><br>";
    elm.innerHTML += "Bar : <input type='range' min=\"1\" max='"+guiModel+"' ng-model='" + guiModel + "'>";
    //elm.innerHTML += "<input type='text' ng-model='" + guiModel + "' size='1'>";
};
myModule.controller("exCtrl", function ($scope) {
    $scope.flag = 1;
    createSlider("idLeft", "LeftSlider", $scope.flag);
  
    $scope.changeSlider = function(flag){
      createSlider("idLeft", "LeftSlider", flag);
    };
});

<body >
        <div ng-app="appMyExample" ng-controller="exCtrl" >
          <p><b>Unit:</b><input name='rad' ng-model="flag" type="radio" ng-value="1" ng-change="changeSlider(1)"> Pixels (1)
                    <input name='rad' ng-model="flag" type="radio" ng-value="5" ng-change="changeSlider(5)"> Millimeters (5)
                    <input name='rad' ng-model="flag" type="radio" ng-value="10" ng-change="changeSlider(10)"> Centimeters (10)
                    <input name='rad' ng-model="flag" type="radio" ng-value="50" ng-change="changeSlider(50)"> Meters (50)
          </p>
            <table>
                <tr>
                    <td>
                        <div id="idLeft" style="outline: 2px solid"></div>
                    </td>
                </tr>
            </table>
                <label>    Total displacement:    <input type="text" value="{{flag}}" ></label>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </body>

Collected from the Internet

Please contact [email protected] to delete if infringement.