AngularJS-Slider Issue Report

Fork this Fiddle to show an issue and report it here: https://github.com/rzajac/angularjs-slider/issues

by sqiudward

HTML

<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css">
<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}}</p>
        <rzslider class="custom-slider" rz-slider-model="vm.priceSlider.value" rz-slider-options="vm.priceSlider.options"></rzslider>
    </div>
</div>

CSS

.custom-slider.rzslider .rz-bar {
  background: #ffe4d1;
  height: 2px;
}

.custom-slider.rzslider .rz-selection {
  background: orange;
}

.custom-slider.rzslider .rz-pointer {
  width: 8px;
  height: 16px;
  top: auto; /* to remove the default positioning */
  bottom: 0;
  background-color: #333;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

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

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

.custom-slider.rzslider .rz-limit {
  font-weight: bold;
  color: orange;
}

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

.custom-slider.rzslider .rz-tick.rz-selected {
  background: orange;
}

JavaScript

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

myApp.controller('TestController', TestController);

function TestController() {
    var vm = this;

    vm.priceSlider = {
        value: 3,
        options: {
            floor: 1,
            ceil: 3,
            showSelectionBar: true,
            selectionBarGradient: {
              from: 'white',
              to: '#FC0'
            }
        }
    }
}