Slider & Input with AngularJS

by Ivan Gerasimenko

HTML

<link rel="stylesheet" href="http://prajwalkman.github.io/angular-slider/angular-slider/angular-slider.css">
<script src="http://prajwalkman.github.io/angular-slider/angular-slider/angular-slider.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>angular-slider example</title>
</head>
<body>
	
<div style="width:500px;" ng-controller="ItemCtrl">
    <div style="width:400px; float: left; margin-top: 15px;">
        <slider floor="0" ceiling="100" step="0.01" precision="2" ng-model="cost"></slider>
    </div>
    <input style="width: 70px; float: right; margin-top: 28px;" type="text" ng-model="cost" value="{{cost}}" />
</div>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
</body>
</html>

JavaScript

app = angular.module('app', ['uiSlider']);

app.controller('ItemCtrl', ['$scope', function($scope) {
    $scope.cost = 50
}]);