用指针改变angularjs滑块的颜色

Question

嗨我在angularjs中构建一个滑块,根据移动指针的位置改变颜色.

1.)如果指针位于右侧,则指示条将为红色2.)如果指针位于左侧,则指示条将为蓝色3.)如果指针位于中间,则指示条将为半红色,一半蓝色

我正在使用这个库:http://prajwalkman.github.io/angular-slider/

问题:

我试图通过将一个指针固定在底部并且不可见来实现这一点,这样当滑块改变颜色时只有一个指针移动.然而,我正在摸索如何使这项工作.有帮助吗？

这是一个吸烟者:http://plnkr.co/edit/tmDfTksDwSRLrc0choOJ？p =preview

Answer 1

我检查了你的代码,它与角度js无关,你只需要修改第19行的angular-slider.css中的css来完成这个.

slider span.bar {
  width: 100%;
  height: 100%;
  z-index: 0;
  -webkit-border-radius: 1em/1em;
  border-radius: 1em/1em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F53337), color-stop(1, #F72529));
  background: -webkit-linear-gradient(top, #F53337 0, #F72529 100%);
  background: -moz-linear-gradient(top, #F53337 0, #F72529 100%);
  background: -o-linear-gradient(top, #F53337 0, #F72529 100%);
  background: -ms-linear-gradient(top, #F53337 0, #F72529 100%);
  background: linear-gradient(top, #F53337 0, #F72529 100%);
  -webkit-box-shadow: inset 2px 2px 5px;
  box-shadow: inset 2px 2px 5px;
}

这是插件:http://plnkr.co/edit/1zjfNbUSwNkdWxpYGZgP？p = preview

颜色也可以根据您的口味进行调整.