Change the radius of Circle google map using input type="range"

Question

i'm trying to dynamically update the value of the radius using the input type="range". i have gotten my marker, center, circle and default radius. how do i update the value of the radius using the value of the input type="range". anyone pls!!

    <input type="range" min="100" max="500" name="userlevelofsurfing" ng-model="data.levelvalue" ng change="setLevelText()">
    {{data.levelvalue }}m


    var mrgdata='http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lang+'&sensor=true'
                $http.get(mrgdata).success(function (response) { 


                    var myLatlng = new google.maps.LatLng(lat,lang);

                    var mapOptions = {
                      center: myLatlng,
                      zoom: 16,
                      mapTypeId: google.maps.MapTypeId.ROADMAP,


                    };

                    var map = new google.maps.Map(document.getElementById("map"), mapOptions);


                    $scope.data = {
                            levelvalue: 100,
                            level1wordDescription: "INTERMEDIATE+",
                            testvariable: 100
                    }

                    $scope.setLevelText = function() {
                            console.log('range value has changed to :'+$scope.data.levelvalue);
                            $scope.data.testvariable = $scope.data.levelvalue;

                    }



                    circle = new google.maps.Circle( {
                            map           : map,
                            center        : myLatlng,
                            radius        : $scope.data.testvariable,
                            //editable: true,
                            strokeColor   : '#FF0099',
                            strokeOpacity : 1,
                            strokeWeight  : 2,
                            fillColor     : '#009ee0',
                            fillOpacity   : 0.2
                    });

                    var marker = new google.maps.Marker({
                          position: myLatlng,
                          map: map,
                          title: 'Current Location'
                    }); 

                    $scope.map = map;


                }).error(function (data, status, headers, config) {
                    console.log("error");



                });

Answer 1

You can use the ng-change property on the input to fire a function when the value changes:

<input
  type="range"
  min="1"
  max="601"
  step="100"
  ng-change="updateCircleRadius(radius)"
  ng-model="radius"
>

And use set this in your controller to update the circle with the new radius:

$scope.updateCircleRadius = function(val) {
  circle.setRadius(Number(val))
}

Live demo.