CODEWITHSUNDEEP
javascriptangularjs
Bonk
Bonk

Reputation: 1949

Binding a Range input to modify styles?

I want to have a slider that that controls the height and width of several divs, however, I can't seem to get them to bind correctly.

<div ng-controller="SizeCtrl">
    <input type="range" min="100" max="200" ng-model="sliderval" />
    <div class="box" ng-style="height:sliderval; width:sliderval"> Box 1</div>
    <div class="box" ng-style="height:sliderval; width:sliderval"> Box 2</div>
    <div class="box" ng-style="height:sliderval; width:sliderval"> Box 3</div>
    <div class="box" ng-style="height:sliderval; width:sliderval"> Box 4</div>
    <div class="box" ng-style="height:sliderval; width:sliderval"> Box 5</div>
</div>

https://jsfiddle.net/nopctoday/dnvwbywv/3/

Upvotes: 1

Views: 209

Answers (3)

falsarella
falsarella

Reputation: 12447

You can also use ng-style like in this fiddle.

HTML:

<div ng-app="myApp">
  <div ng-controller="SizeCtrl">
    <input type="range" min="100" max="200" ng-model="sliderval" />
    <div class="box" ng-style="{'height':sliderval+'px', 'width':sliderval+'px'}"> Box 1</div>
    <div class="box" ng-style="{'height':sliderval+'px', 'width':sliderval+'px'}"> Box 2</div>
    <div class="box" ng-style="{'height':sliderval+'px', 'width':sliderval+'px'}"> Box 3</div>
    <div class="box" ng-style="{'height':sliderval+'px', 'width':sliderval+'px'}"> Box 4</div>
    <div class="box" ng-style="{'height':sliderval+'px', 'width':sliderval+'px'}"> Box 5</div>
  </div>
</div>

The changes here were:

  • Add <div ng-app="myApp">
  • Change ng-style to ng-style="{'height':sliderval+'px', 'width':sliderval+'px'}"

JavaScript:

var myApp = angular.module('myApp', []);

myApp.controller('SizeCtrl', function ($scope, $element) {
   $scope.sliderval = 100;
});

The changes here were:

  • Initialize sliderval variable
  • Changed scripting option from onLoad to No wrap - in <head>

Upvotes: 0

dting
dting

Reputation: 39287

You can use ng-style like this:

var myApp = angular.module('myApp', []);

myApp.controller('SizeCtrl', function($scope) {
  $scope.$watch('sliderval', function() {
    $scope.myStyle.height = $scope.sliderval + 'px',
    $scope.myStyle.width =  $scope.sliderval + 'px'
  });
  
  $scope.sliderval = 100;
  $scope.myStyle = {};  
});
.box {
  height: 100px;
  width: 100px;
  border: red 2px solid;
  margin: 1em;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp" ng-controller="SizeCtrl">
  <input type="range" min="100" max="200" ng-model="sliderval" />{{sliderval}}
  <div class="box" ng-style="myStyle">Box 1</div>
  <div class="box" ng-style="myStyle">Box 2</div>
  <div class="box" ng-style="myStyle">Box 3</div>
  <div class="box" ng-style="myStyle">Box 4</div>
  <div class="box" ng-style="myStyle">Box 5</div>
</div>

Upvotes: 0

Travis Collins
Travis Collins

Reputation: 4020

Try my fix: https://jsfiddle.net/dnvwbywv/4/

I had to add ng-app to your code, also changed the way style is being bound.

<div class="box" style="height:{{sliderval}}px; width:{{sliderval}}px"> Box 1</div>

Upvotes: 3

Related Questions