rzSlider

by Gibrain Hernandez

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="myapp">
    <div ng-controller="TestController as vm">
        <p>Price: {{vm.priceSlider.value |currency}}</p>
        <rzslider rz-slider-model="vm.priceSlider.value" rz-slider-options="vm.priceSlider.options"></rzslider>
    </div>
</div>

CSS

/*rzslider*/
.rzslider {
	 display: inline-block;
	 position: relative;
	 height: 4px;
	 width: 100%;
	 margin: 35px 0 15px 0;
	 vertical-align: middle;
	 user-select: none;
}
 .rzslider.noanimate * {
	 transition: none !important;
}
 .rzslider.with-legend {
	 margin-bottom: 40px;
}
 .rzslider[disabled] {
	 cursor: not-allowed;
}
 .rzslider[disabled] .rz-pointer {
	 cursor: not-allowed;
	 background-color: #d8e0f3;
}
 .rzslider[disabled] .rz-draggable {
	 cursor: not-allowed;
}
 .rzslider[disabled] .rz-selection {
	 background: #8b91a2;
}
 .rzslider[disabled] .rz-tick {
	 cursor: not-allowed;
}
 .rzslider[disabled] .rz-tick.rz-selected {
	 background: #8b91a2;
}
 .rzslider span {
	 white-space: nowrap;
	 position: absolute;
	 display: inline-block;
       font-size: 20px;
    font-weight: bolder;
}
 .rzslider .rz-base {
	 width: 100%;
	 height: 100%;
	 padding: 0;
}
 .rzslider .rz-bar-wrapper {
	 left: 0;
	 box-sizing: border-box;
	 margin-top: -16px;
	 padding-top: 16px;
	 width: 100%;
	 height: 32px;
	 z-index: 1;
	 transition: all linear 0.3s;
}
 .rzslider .rz-draggable {
	 cursor: move;
}
 .rzslider .rz-bar {
	 left: 0;
	 width: 100%;
	 height: 12px; /*Grosor de barra seleccionadora - aquí la magia*/
	 z-index: 1;
	 background: #d8e0f3;
	 -webkit-border-radius: 2px;
	 -moz-border-radius: 2px;
	 border-radius: 2px;
}
 .rzslider .rz-bar-wrapper.rz-transparent .rz-bar {
	 background: transparent;
}
 .rzslider .rz-bar-wrapper.rz-left-out-selection .rz-bar {
	 background: #df002d;
}
 .rzslider .rz-bar-wrapper.rz-right-out-selection .rz-bar {
	 background: #03a688;
}
 .rzslider .rz-selection {
	 z-index: 2;
	 background: #0db9f0;
	 -webkit-border-radius: 2px;
	 -moz-border-radius: 2px;
	 border-radius: 2px;
	 transition: background-color linear 0.3s;
}
 .rzslider .rz-restricted {
	 z-index: 3;
	 background: red;
	 -webkit-border-radius: 2px;
	 -moz-border-radius: 2px;
	 border-radius: 2px;
}
 .rzslider .rz-pointer {
	 cursor: pointer;
	 width: 32px;
	 height:...

JavaScript

var myApp = angular.module('myapp', ['rzSlider']);

myApp.controller('TestController', TestController);

function TestController() {
  var vm = this;

  vm.priceSlider = {
    value: 1000,
    options: {
      floor: 1000,
      step: 1000,
      showTicksValues: false,
      showTicks: true,
      showSelectionBar: true,
      ceil: 25000,
      translate: function(value) {
        return '$' + value.toLocaleString("en");
      },
      getSelectionBarColor: function() {
        return '#ED6F47';
      },
      getPointerColor: function() {
        return '#ED6F47';
      }
    }
  }
}