cog-range-slider

A customizable range slider that utilizes jQuery UI slider component. The slider can be vertical or horizontal with a customized minimum value, maximum value and stepping value.

Installation

• ember install cog-range-slider

Usage

{{cog-range-slider
  min=0
  max=100
  step=1
  orientation='horizontal'
}}

Configuration

| Property | Description | Default | | -------- | ----------- | ------- | | min | Sets the minimum value of the slider. | 0 | | max | Sets the maximum value of the slide. | 100 | | values | Array of two values that sets the starting values for both slider handles. | [0, 1] | | step | Sets the incremental value that the slider handle will move when dragging along the slider track. | 1 | | animation | Determines whether to slide the handle smoothly when the user clicks on the slider track. | true | | disabled | Disables the slider if set to true. | false | | orientation | Sets the orientation of the slider to be horizontal or vertical. | horizontal | | rangeLocked | Ensures that the two slider handles move in unison as you slide them along the slider track. | false |

Testing

• ember serve
• Visit your app at http://localhost:4200/tests.