slider validator

slide a slider to valid area for validating

being developed, don`t use it until completed(may be soon)

Instructions

<div class="slider-container"></div>

 
// global
var container = div.querySelector('.slider-container');
SliderValidator.create(container);
 
// AMD
define('SliderValidator', function() {
  var container = div.querySelector('.slider-container');
  SliderValidator.create(container);
});
 
// commonjs(browserify or webpack)
 
var SliderValidator = require('slider-validator');
var container = div.querySelector('.slider-container');
SliderValidator.create(container);
 
container.addEventListener('slider.success', function() {
  // do success callback
}, false);
container.addEventListener('slider.failure', function() {
  // do failure callback
}, false);
 
// create with options
SliderValidator.create(container, {
  // when slider near valid area less than this pixy, then succeed
  // default is 10
  validDistance: 20,
 
  // when slider in valid distance, add valid area 'active' class
  // custom the active color in css file
  // default is true
  validActive: false,
 
  // slider content, default is ≶
  sliserContent: '≶'
});

with jquery

$('.slider-container').sliderValidator();
$('.slider-container').on('slider.success', function() {
  // do success callback
}).on('slider.failure', function() {
  // do failure callback
});

notice

by default, when the slider moves to valid area, it can not be draged again because it is covered by the area. if you want slider can be draged again after slider.success event, increase z-index of slider to make it dragable.

browser support

test in chrome and firefox, other browser, ie latest should be ok.

the "slider-container" class is related in css, if changed it to id or other class name, change the css togather

TODO

test bower behavior