jquery sliders demo

by Ryan

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<link rel="stylesheet" href="https://nvd3.org/src/nv.d3.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://nvd3.org/nv.d3.js"></script>
<div ng-app="app" ng-controller="MainController">
    
    <div style="float:left;">
        <div class="tile" x-ng-repeat="a in seriesExtent">
            <div class="title">
                <label>{{a}}</label>
            </div>
            <div class="slider" x-slider x-color="{{colors[a]}}"></div>
        </div>
    </div>
    <div style="float: left; height: 300px; width: 500px;"
        x-bar-chart
        id="barChart"
        x-colors="colors"
        x-data="data"></div>

</div>

CSS

body {
    color: #333;
    font: 82% Arial,Verdana,sans-serif;
    line-height: 20px;
}
div.tile {
    width: 100px;
    border-bottom: 1px #eee solid;
    margin: 2px;
    padding: 6px;
}
div.slider { margin-top: 5px;}
select {
    width: 80px;
}
.ui-slider-horizontal { height: 0.4em !important; }
.ui-slider-handle { height: 0.8em !important; width: 0.6em !important; }

JavaScript

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

app.directive('slider', function() {
	return {
		restrict: 'A',
		scope: {
			color: '@',
		},
		link: function(scope, elem, attrs){
            $(function(){
                elem.slider({min: 0, max: 10, value: 10});
                $(".ui-widget-header", elem).css("background", attrs.color);
                $(".ui-slider-handle", elem).css("background", attrs.color);
            });
		}
	}
});

app.directive('barChart', function() {
	return {
		restrict: 'A',
		scope: {
			data: '=',
			colors: '='
		},
		link: function(scope, element, attrs){
            // Wrap the color map in an accessor function
			var colors = (scope.colors === undefined)? undefined : function(d){ return scope.colors[d.key]; };

            //create the bar chart
            var svg = d3.select("#" + $(element).attr("id")).append("svg");
					
			var barChart = nv.models.multiBarChart();
			barChart.stacked(true);
			barChart.color(d3.scale.category10().range());
			barChart.showControls(false);
			barChart.showLegend(false);
			barChart.rotateLabels(false);
			barChart.yAxis.tickFormat(d3.format(',.0f'));
			barChart.reduceXTicks(false);
			barChart.xAxis.staggerLabels(true);
			barChart.tooltip(function(key, x, y, e, graph) {
				var toReturn = 
					"<h3>" + x + "</h3>" +
					"<p>" +  y + " for " + key + "</p>";
				return toReturn;
			});

			var draw = function(data){
                svg.datum(data)
                    .transition().duration(500)
                    .call(barChart);
			};

			var unbindData = scope.$watch('data', function(newValue, oldValue){
				if(newValue){
					draw(scope.data);
				}
			});
		}
	}
});

function MainController($scope) {
    $scope.seriesExtent = [
        "Reconnaissance", 
        "Infiltration", 
        "Collection", 
        "Exfiltration", 
        "Concealment"
    ];
    
    var colors = {};
    for(var i=0; i<$scope.seriesExtent.length; i++){
        colors[$scope.seriesExtent[i]] =...