Real Estate Search Inputs

by Ryan

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://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>
<div ng-app="app" ng-controller="MainController">
    
    <div class="tile" x-ng-repeat="a in data">
        <div class="title" x-ng-class="{enabled: a.enabled}">
            <label><input class="checkbox" type="checkbox" x-ng-model="a.enabled"></input>{{a.label}}</label>
        </div>
        <select x-ng-disabled="!a.enabled" x-ng-model="a.value" x-ng-options="o for o in a.options"></select>
        <div class="slider" x-slider x-color="{{a.color}}"></div>
    </div>

</div>

CSS

body {
    color: #333;
    font: 82% Arial,Verdana,sans-serif;
    line-height: 20px;
}
div.tile {
    width: 150px;
    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);
            });
		}
	}
});

function MainController($scope) {
    $scope.data = [
        {
            label: "Price",
            enabled: true,
            value: "$300,000",
            options: ["$300,000"],
            color: "rgb(31, 119, 180)"
        },
        {
            label: "Bedrooms",
            enabled: true,
            value: "3",
            options: ["3"],
            color: "rgb(255, 127, 14)"
        },
        {
            label: "Bathrooms",
            enabled: false,
            value: "2.5",
            options: ["2.5"],
            color: "rgb(44, 160, 44)"
        },
        {
            label: "Home Size",
            enabled: true,
            value: "2,500 sqft",
            options: ["2,500 sqft"],
            color: "rgb(214, 39, 40)"
        },
        {
            label: "Lot Size",
            enabled: true,
            value: "0.5 acres",
            options: ["0.5 acres"],
            color: "rgb(148, 103, 189)"
        },
        {
            label: "Home Age",
            enabled: false,
            value: "1 year",
            options: ["1 year"],
            color: "rgb(140, 86, 75)"
        }
    ];
}