<style>
.blinds_widget .progress-controls {
    position: absolute;
    z-index: 999;
  	right:0;
  	margin-right:10px;
}

.blinds_widget .btn-group-vertical {
  	position: relative;

}

.blinds_widget .blinds-slider  .progress-controls .btn-default {
    color: rgb(103, 106, 108);
  	font-size:26px;
    background-color: rgba(255,255,255,0.5);
    border-color:rgb(103, 106, 108, 0.5);
  	padding: 0 !important;
  	height:54px;
}

.blinds_widget .blinds-slider .progress-controls .btn-default:hover {
    border-color:rgb(103, 106, 108, 0.5);
  	background-color: rgba(255,255,255,0.7);

}

.blinds_widget .rz-limit {
  	display:none;
}

.blinds_widget button {
  	border: 0px solid white;
  	background: rgba(0,0,0,0.5);
  	color: white;
  	height: 1.5em;
  	width: 1.5em;
  	float: left;
  	font-size: 3em;
  	margin-right: 12px;
  	line-height: 50%;
  	padding: 0 0 0 0;
}

.blinds_widget .center {
    margin: 0 auto;
}

.blinds_widget .blinds-slider .rzslider .rz-bar {
  	background-color: #cccccc;
  	width: 100%;
}

.blinds_widget .blinds-slider .rzslider .rz-selection {
  	background-color: #b16700;
}

.blinds_widget .blinds-slider.blinds-slider-{{ngModel.col}}-{{ngModel.row}} .rzslider .rz-selection {
  	background-color: #75bbfd;
}
.blinds_widget .blinds-slider.blinds-slider-{{ngModel.col}}-{{ngModel.row}}.inactive .rzslider .rz-selection {
  	background-color: #7e7b7b;
}
.blinds_widget .blinds-slider.inactive .rzslider .rz-bar {
  	background-color: #cccccc;
}


.blinds_widget .readonly.blinds-slider.blinds-slider-{{ngModel.col}}-{{ngModel.row}} .rzslider {
  	pointer-events: none;
}

.blinds_widget .blinds-slider .rzslider .rz-pointer {
  	display:none;
}

.blinds_widget .blinds-slider .rzslider .rz-pointer:after {
  	display: none;
}

.blinds_widget .blinds-slider .rzslider .rz-bubble {
  	bottom: 14px;
}

.blinds_widget .blinds-slider .rzslider .rz-tick {
  	width: 1px;
  	height: 10px;
  	margin-left: 4px;
  	border-radius: 0;
  	background: #ffe4d1;
  	top: -1px;
}

.blinds_widget .blinds-slider .rzslider .rz-tick.rz-selected {
  	background-color: #b16700;
}

.blinds_widget .blinds-slider .rzslider.rz-vertical {
    width: 100%;
  	margin: 0;
}

.blinds_widget .blinds-slider .rzslider.rz-vertical .rz-bubble {
    bottom: 0;
    left: 0px!important;
    margin-left: 3px;
  	z-index:100;
  	color:white !important;
}

.blinds_widget .blinds-slider .rzslider.rz-vertical .rz-bar-wrapper {
 		margin:0;
  	padding:0;
  	width:100%;
  	cursor:pointer;
 }

.blinds_widget .blinds-slider .box-content {
  	padding:0;
}
</style>


<div class="blinds_widget">
  <div class="title">{{ngModel.name}}</div>

  <div class="blinds-slider blinds-slider-{{ngModel.col}}-{{ngModel.row}} row center" ng-class="{'inactive':itemValue(config.blind_item) == 'N/A' || itemValue(config.blind_item) == 'UNDEF', 'readonly':config.no_slider || itemValue(config.blind_item) == 'UNDEF'}" style="height:180px;width:100%;"   ng-init='slider = {
    "item": config.blind_percentage,
    "ceil": 100,
    "floor": 0,

    "step": 10,
    "unit": "%",
    "vertical": true,
    "inverted": false,
    "readonly": false
};'>

<div class="progress-controls">
	<div class="btn-group-vertical">
		<button type="button" class="btn btn-default btn-lg" title="UP" ng-click="sendCmd(config.blind_item, config.cmd_up)">
    <i class="glyphicon glyphicon-menu-up"></i>
    </button>
    <button type="button" class="btn btn-default btn-lg" title="STOP" ng-click="sendCmd(config.blind_item, config.cmd_stop)">
    <i class="glyphicon glyphicon-stop"></i>
    </button>
    <button type="button" class="btn btn-default btn-lg" title="DOWN" ng-click="sendCmd(config.blind_item, config.cmd_down)">
    <i class="glyphicon glyphicon-menu-down"></i>
    </button>
	</div>
</div>

    <widget-slider class="blinds-slider" ng-model="slider"></widget-slider>
  </div>
</div>