formslider.nouislider

This plugin adds nouislider capabilities to jquery.fromslider.

Installation

bower install formslider.nouislider
 
# or 
 
npm install formslider.nouislider

Include js dependencies

Load the following dependencies:

• [path_to_you_bower_components]/wnumb/wNumb.js
• [path_to_you_bower_components]/nouislider/distribute/nouislider.min.js
• [path_to_you_bower_components]/formslider.nouislider/dist/formslider.nouislider.js

Css:

• [path_to_you_bower_components]/nouislider/distribute/nouislider.min.css

Load the plugin

See formslider for more infos.

 
formslider = $('.formslider-wrapper').formslider(
  ...
)
 
formslider.plugins.load({
  class: 'NoUiSlider',
  config:
    selector: '.range-slider'
    inputSelector: 'input'
    start: 0
    step: 150
    min: 0
    max: 100
    animate: true
    animationDuration: 300
    behaviour: 'tap-drag'
    orientation: 'horizontal'
    direction: 'ltr'
    tooltips: false
    connect: [true, false]
    # format 
    decimals: 3
    unit: '€'
    thousandSeperator: '.'
    # scales 
    pipsMode: 'count'
    pipsStepped: false
    pipsValues: 2
    pipsDensity: 100
    # events 
    onUpdate: (plugin, slide, values, handle) ->
      $(plugin.config.inputSelector, slide).val(values[handle])
 
  })

Events

The Plugin triggers the following events before going to next slide:

@trigger('question-answered', questionId, answerId, asnwerValue, slideIndex)

Changelog

1.1.2

• support setting value via input

1.1.1

• NoUiSlider triggeres now a question-answered event before next slide

1.1.0

• rename NoUiSliderPlugin -> NoUiSlider follow formslider 1.1 naming style

Resources

• https://github.com/formslider/jquery.formslider
• https://github.com/formslider/formslider.nouislider
• http://bower.io/search/?q=formslider.nouislider
• https://refreshless.com/nouislider
• https://refreshless.com/wnumb/

Authors

Tom Hanoldt