Angular port of circular-slider which helps to slide range of values and images. It supports half(top/bottom/up/down) and full circle shapes


bower install angular-circular-slider

var app = angular.module('yourApp',
  ['angular.circular-slider']);

<link rel="stylesheet"
 href="dist/css/angular-circular-slider.min.css" />
<script src="dist/js/angular-circular-slider.js">
</script>
..
<circular-slider
  class='my-slider'
  shape='{{shape}}'
  touch="true"
  animate='true'
  on-slide='onSlide'
  on-slide-end='onSlideEnd'
  min="min"
  max="200"
  value="value">
  {{value}}
</circular-slider>

radius of the circle in px.

ratio of inner circle area(used to display current sliding value).

ratio of indicator ball.

min value of the slider.

max value of the slider.

Initial value of the slider.

direction of the sliding value.

shape of the slider. Supported shapes are:

1. 'Circle' (default)
2. 'Half Circle'
3. 'Half Circle Left'
4. 'Half Circle Right'
5. 'Half Circle Bottom'

touch support. (default: true)

linear animation support. (dafault: true)

Animation duration in milliseconds. (default: 360ms)

text selection enabled or not. (default: false)

slider is disabled or not. (default: false)

Distance between handle and shape center(default: 1.0)

Border width(in px) of the slider(default: 1)

###onSlide(value)

onSlide callback is triggered whenever there is a change in sliding value.

Parameters:

value - Current sliding value

###onSlideEnd(value)

onSlideEnd callback is triggered when the user action is done (on mouse up/touch end or click).

Parameters:

value - Current sliding value

##Default values

defaults: {
  min: 0,
  max: 359,
  value: 0,
  radius: 75,
  innerCircleRatio: 0.5,
  borderWidth: 1,
  indicatorBallRatio: 0.2,
  handleDistRatio: 1.0,
  clockwise: true,
  shape: "Circle",
  touch: true,
  animate: true,
  animateDuration: 360,
  selectable: false,
  disabled: false,
  onSlide: angular.noop,
  onSlideEnd: angular.noop,
},

scope: {
  min: '=?',
  max: '=?',
  value: '=?',
  radius: '=?',
  innerCircleRatio: '=?',
  indicatorBallRatio: '=?',
  handleDistRatio: '=?',
  borderWidth: '=?',
  clockwise: '=?',
  shape: '@?',
  touch: '=?',
  animate: '=?',
  animateDuration: '=?',
  selectable: '=?',
  disabled: '=?'
  onSlide: '=',
  onSlideEnd: '=',
},

scope: {
  value: '=?',
  disabled: '=?'
}

Use the below css classes for customization

.acs-panel - circular slider panel

.acs - Slider area

.acs-value - Inner circle area

.acs-indicator - Slide indicator ball

This plugin is licensed under the MIT license.

Copyright (c) 2015 Prince John Wesley