AngularJS Example:
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app='Breeze'>
<div ng-controller="calcController">
<h3 class="floating-menu">${{values.estimate}}</h3>
<form ng-controller="calcController" method="post" action="/estimate">
<div class="container">
<div class="vals">${{values.insurance}}</div>
<div id="insurance-slider">
<slider floor="0" ceiling="250" value="125" step="25" precision="2" ng-model="values.insurance" ng-change="changeVal()" translate="currencyFormatting"></slider>
</div>
</div>
<div class="container">
<div class="vals">${{values.lease}}</div>
<div id="lease-slider">
<slider floor="0" ceiling="250" value="125" step="25" precision="2" ng-model="values.lease" translate="currencyFormatting"></slider>
</div>
</div>
</form>
</div>
</div>
JavaScript
//create the module
angular.module('Breeze', [])
// create the controller and inject Angular's $scope
.controller('calcController', ['$scope', function($scope) {
$scope.values = {
// Default values
insurance: 125,
lease: 125,
};
$scope.values.estimate = $scope.values.insurance + $scope.values.lease;
// Formatting for scale bar
$scope.currencyFormatting = function(value) {
return value.toString() + " $";
}
}]);