Add nouislider to text fields with class slider

Public

These snippets are for supporting the noUiSlider. http://refreshless.com/nouislider/

Get raw version
javascript
  1. (function ($) {
  2. // Run when document is fully loaded
  3. $(document).ready(function(){
  4. // Get all input fields that should have a slider
  5. $sliderInput = $(".slider input.textinput");
  6. // Create the markup need for the noUiSlider plugin
  7. $slider = $('<div></div>', {
  8. class: 'noUiSlider slider'
  9. });
  10. // Append the slider markup to all elements with the class slider
  11. $sliderInput.before($slider);
  12.  
  13. $sliderInput.each(function(){
  14. $this = $(this);
  15. // Call the plugin and set the setting for the slider
  16. $this
  17. .addClass('js-hide')
  18. .siblings('.slider')
  19. .noUiSlider({
  20. range: [0, 10],
  21. start: [5],
  22. step: 1,
  23. handles: 1,
  24. serialization: {
  25. to: [$this],
  26. resolution: 1
  27. }
  28. });
  29. });
  30. });
  31. })(jQuery);
Get raw version
php
  1. /**
  2. * Implements hook_form_FORM_ID_alter().
  3. */
  4. function hook_form_FORM_ID_alter (&$form, &$form_state, $form_id) {
  5. // Add class to textfields to enable jQuery slider.
  6. $form['FIELD_NAME']['#attributes']['class'][] = 'slider';
  7. }