You are here

README.txt in SliderField 7.2

Same filename and directory in other branches
  1. 7 README.txt
DESCRIPTION
============

Integrates jQuery UI Slider with Drupal.
It provides one form element and one widget
All slider parameters are configurable either as parameters for form element or in widget settings form

FEATURES
============

- A widget that adds slider to numeric fields
- Group sliding : by using it one can connect several sliders, the result is
  by changing one slider the others sliders linked to it will also change. There are several group types that 
  indicate how the other sliders change. Look for "group" 
- Form API element for using slider in custom forms
- Slider color sets
- Flexible Ajax support
- Supports most of jquery slider parameters like orientation, disable/enable , animation , step, etc for both UI and Form Element
- Setting default length for slider
- Adjustable slider widget that allows changing slider range dynamically
- Supports all numeric field types
- Supports integer , float and decimal numbers as step
- Can display bubble/hint near slider handles
- Compatible with editablefields module
- Fields using slider field can have empty value, proper UI is implemented to handle it
- Full Webform integration
- Compatibility with form api #states
- Customizable through #attributes and proper css wrappers

Notice : It's not yet possible to create two handled sliders via Field UI

INSTALLATION
============

Enable the module at Administer >> Modules.

UPGRADE
============
All the features of SliderField v1 is supported, simple use upgrade.php
and apply the pending updates

MIGRADE
============
jslider_field module users can also easily migrate :
- Download and install sliderfield version 1
- Download sliderfield version 2 and call upgrade.php

FAQ
============
How to enable touch support for mobile devices ?
It's out of the scope of this module but you may read this issue for how to do it https://www.drupal.org/node/2396457

DOCUMENTATION
============

For Field Widget you can use "Slider Field" as widget for any numeric field type

You may use Forms API element type slider or transfer_slider

For demonstration you can can enable sliderfield_example module and visit examples/sliderfield

Example:

  $form['slider'] = array(
    '#type' => 'transfer_slider',
    '#title' => t('Slider test'),
    '#left_value' => 0,
    '#right_value' => 200,
    '#left' => t('Left input'),
    '#right' => t('Right input'),
    '#size' => 4,
  );

  $form['slider1'] = array(
    '#title' => NULL,
    '#title2' => NULL,
    '#input_title' => t('Min'),
    '#input2_title' => t('Max'),
    /**
    * Make the min value adjustable dynamically via another element
    * Type of the value is CSS selector
    * like .myfield, #element_id
    */
    '#adjust_field_min' => NULL,
    /**
    * Make the max value adjustable dynamically via another element
    * Type of the value is CSS selector
    * like .myfield, #element_id
    */
    '#adjust_field_max' => NULL,
    /**
     * Boolean: When set to true, the handle will animate with the default duration.
     * String: The name of a speed, such as "fast" or "slow".
     * Number: The duration of the animation, in milliseconds.
     */
    '#animate' => 'fast',
    /**
     * Disables the slider if set to true.
     */
    '#disabled' => FALSE,
    /**
     * The maximum value of the slider.
     */
    '#max' => 100,
    /**
     * The minimum value of the slider.
     */
    '#min' => 0,
    /**
     * Determines whether the slider handles move horizontally (min on left, max on right)
     * or vertically (min on bottom, max on top). Possible values: "horizontal", "vertical".
     */
    '#orientation' => 'horizontal',
    /**
     * Whether the slider represents a range.
     * Multiple types supported:
     *   Boolean: If set to true, the slider will detect if you have two handles and create a stylable range element between these two.
     *   String: Either "min" or "max". A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.
     */
    '#range' => FALSE,
    /**
     * Determines the size or amount of each interval or step the slider takes between the min and max.
     * The full specified value range of the slider (max - min) should be evenly divisible by the step.
     */
    '#step' => 1,
    /**
     * Determines the value of the slider, if there's only one handle.
     * If there is more than one handle, determines the value of the first handle.
     * Or an array of values can be passed array('value'=>1 , 'value2'=> 2) ,
     * the order of values is important
     */
    //'#value' => 0,
    '#default_value' => NULL,
    /**
     * Some default color styles for ease of use
     * red, green, blue
     */
    '#slider_style' => NULL,
    /**
     * Default size for input values
     */
    '#size' => 3,
    /**
     * If set to FALSE will display inputs only when javascript is disabled
     */
    '#display_inputs' => TRUE,
    /**
     * If enabled display the current values of slider
     * as simple text
     */
    '#display_values' => FALSE,
    /**
     * Format of the displayed values
     * The usage is mostly for showing $,% or other signs near the value
     */
    '#display_values_format' => '%{value}%',
    /**
     * Display a hint/bubble near each slider handle showing the value of that handle
     */
	'#display_bubble' => FALSE,
	/**
	* Format of the displayed values in bubble/hint, The usage is mostly for showing $,% or other signs near the value. Use %{value}% as slider value
	* For range slider it can have two values separated by || like "$%{value}%MIN||$%{value}%MAX"
	*/
	'#display_bubble_format' => '%{value}%',
    /**
     * Acceptable types are the same as css with and height and it will be used as width
     * or height depending on #orientation
     */
    '#slider_length' => NULL,
    /**
     * Display the element inside a fieldset
     */
    '#display_inside_fieldset' => FALSE,
    /**
     * Sliders with the same group will be linked
     * The behavior of linked sliders depends on group_type parameter
     * group name can only contain letters, numbers and underscore
     */
    '#group' => NULL,
    /**
     * same : All sliders in the same group will have the same value.
     * lock : All sliders in the same group will move with the exact same amount
     * total : The total value of all sliders will be between min/max , increasing value of
     *         one slider decreases the rest of the sliders in the same group
     */
    '#group_type' => 'same',
    /**
     * When set to TRUE, other sliders in the same
     * group will change only if this slider changes
     * values : TRUE , FALSE
     */
    '#group_master' => FALSE,
    /**
     * Disable buildin range validation
     * useful when element is used as widget
     * for fields, since integer fields have range validation
     * values : TRUE , FALSE
     */
    '#validate_range' => TRUE,
    /**
     * In case there are other fields that should be sync dynamically when
     * the slider changes
     * value : .my_field_css_class
     */
    '#fields_to_sync_css_selector' => NULL,
     /**
      * When field is not required, and display_inputs option is inactive
      * a checkbox will be shown allowing user to ignore the field
      * and enter no value
      * values : TRUE , FALSE
      */
     '#display_ignore_button' => FALSE,
     /**
      * When the slider does not have any value by enabling this option it won't show the
      * the slider handle unless user clicks on the slider to select a value
      * values : TRUE , FALSE
      */
     '#hide_slider_handle_when_no_value' => FALSE,
  );

Contributors
============
- Version 1 : Jonathan Rowny (jrowny), www.jonathanrowny.com
- Version 1 : Tom Kirkpatrick (mrfelton), www.systemseed.com
- Version 2 : Transfer Slider code from "jSlider Form API" : Roman Grachev (http://graker.ru/) , Maslouski Yauheni (http://drupalace.ru/)
- Version 2 : Sina Salek (http://sina.salek.ws) Merged in from jslider_field module

File

README.txt
View source
  1. DESCRIPTION
  2. ============
  3. Integrates jQuery UI Slider with Drupal.
  4. It provides one form element and one widget
  5. All slider parameters are configurable either as parameters for form element or in widget settings form
  6. FEATURES
  7. ============
  8. - A widget that adds slider to numeric fields
  9. - Group sliding : by using it one can connect several sliders, the result is
  10. by changing one slider the others sliders linked to it will also change. There are several group types that
  11. indicate how the other sliders change. Look for "group"
  12. - Form API element for using slider in custom forms
  13. - Slider color sets
  14. - Flexible Ajax support
  15. - Supports most of jquery slider parameters like orientation, disable/enable , animation , step, etc for both UI and Form Element
  16. - Setting default length for slider
  17. - Adjustable slider widget that allows changing slider range dynamically
  18. - Supports all numeric field types
  19. - Supports integer , float and decimal numbers as step
  20. - Can display bubble/hint near slider handles
  21. - Compatible with editablefields module
  22. - Fields using slider field can have empty value, proper UI is implemented to handle it
  23. - Full Webform integration
  24. - Compatibility with form api #states
  25. - Customizable through #attributes and proper css wrappers
  26. Notice : It's not yet possible to create two handled sliders via Field UI
  27. INSTALLATION
  28. ============
  29. Enable the module at Administer >> Modules.
  30. UPGRADE
  31. ============
  32. All the features of SliderField v1 is supported, simple use upgrade.php
  33. and apply the pending updates
  34. MIGRADE
  35. ============
  36. jslider_field module users can also easily migrate :
  37. - Download and install sliderfield version 1
  38. - Download sliderfield version 2 and call upgrade.php
  39. FAQ
  40. ============
  41. How to enable touch support for mobile devices ?
  42. It's out of the scope of this module but you may read this issue for how to do it https://www.drupal.org/node/2396457
  43. DOCUMENTATION
  44. ============
  45. For Field Widget you can use "Slider Field" as widget for any numeric field type
  46. You may use Forms API element type slider or transfer_slider
  47. For demonstration you can can enable sliderfield_example module and visit examples/sliderfield
  48. Example:
  49. $form['slider'] = array(
  50. '#type' => 'transfer_slider',
  51. '#title' => t('Slider test'),
  52. '#left_value' => 0,
  53. '#right_value' => 200,
  54. '#left' => t('Left input'),
  55. '#right' => t('Right input'),
  56. '#size' => 4,
  57. );
  58. $form['slider1'] = array(
  59. '#title' => NULL,
  60. '#title2' => NULL,
  61. '#input_title' => t('Min'),
  62. '#input2_title' => t('Max'),
  63. /**
  64. * Make the min value adjustable dynamically via another element
  65. * Type of the value is CSS selector
  66. * like .myfield, #element_id
  67. */
  68. '#adjust_field_min' => NULL,
  69. /**
  70. * Make the max value adjustable dynamically via another element
  71. * Type of the value is CSS selector
  72. * like .myfield, #element_id
  73. */
  74. '#adjust_field_max' => NULL,
  75. /**
  76. * Boolean: When set to true, the handle will animate with the default duration.
  77. * String: The name of a speed, such as "fast" or "slow".
  78. * Number: The duration of the animation, in milliseconds.
  79. */
  80. '#animate' => 'fast',
  81. /**
  82. * Disables the slider if set to true.
  83. */
  84. '#disabled' => FALSE,
  85. /**
  86. * The maximum value of the slider.
  87. */
  88. '#max' => 100,
  89. /**
  90. * The minimum value of the slider.
  91. */
  92. '#min' => 0,
  93. /**
  94. * Determines whether the slider handles move horizontally (min on left, max on right)
  95. * or vertically (min on bottom, max on top). Possible values: "horizontal", "vertical".
  96. */
  97. '#orientation' => 'horizontal',
  98. /**
  99. * Whether the slider represents a range.
  100. * Multiple types supported:
  101. * Boolean: If set to true, the slider will detect if you have two handles and create a stylable range element between these two.
  102. * String: Either "min" or "max". A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.
  103. */
  104. '#range' => FALSE,
  105. /**
  106. * Determines the size or amount of each interval or step the slider takes between the min and max.
  107. * The full specified value range of the slider (max - min) should be evenly divisible by the step.
  108. */
  109. '#step' => 1,
  110. /**
  111. * Determines the value of the slider, if there's only one handle.
  112. * If there is more than one handle, determines the value of the first handle.
  113. * Or an array of values can be passed array('value'=>1 , 'value2'=> 2) ,
  114. * the order of values is important
  115. */
  116. //'#value' => 0,
  117. '#default_value' => NULL,
  118. /**
  119. * Some default color styles for ease of use
  120. * red, green, blue
  121. */
  122. '#slider_style' => NULL,
  123. /**
  124. * Default size for input values
  125. */
  126. '#size' => 3,
  127. /**
  128. * If set to FALSE will display inputs only when javascript is disabled
  129. */
  130. '#display_inputs' => TRUE,
  131. /**
  132. * If enabled display the current values of slider
  133. * as simple text
  134. */
  135. '#display_values' => FALSE,
  136. /**
  137. * Format of the displayed values
  138. * The usage is mostly for showing $,% or other signs near the value
  139. */
  140. '#display_values_format' => '%{value}%',
  141. /**
  142. * Display a hint/bubble near each slider handle showing the value of that handle
  143. */
  144. '#display_bubble' => FALSE,
  145. /**
  146. * Format of the displayed values in bubble/hint, The usage is mostly for showing $,% or other signs near the value. Use %{value}% as slider value
  147. * For range slider it can have two values separated by || like "$%{value}%MIN||$%{value}%MAX"
  148. */
  149. '#display_bubble_format' => '%{value}%',
  150. /**
  151. * Acceptable types are the same as css with and height and it will be used as width
  152. * or height depending on #orientation
  153. */
  154. '#slider_length' => NULL,
  155. /**
  156. * Display the element inside a fieldset
  157. */
  158. '#display_inside_fieldset' => FALSE,
  159. /**
  160. * Sliders with the same group will be linked
  161. * The behavior of linked sliders depends on group_type parameter
  162. * group name can only contain letters, numbers and underscore
  163. */
  164. '#group' => NULL,
  165. /**
  166. * same : All sliders in the same group will have the same value.
  167. * lock : All sliders in the same group will move with the exact same amount
  168. * total : The total value of all sliders will be between min/max , increasing value of
  169. * one slider decreases the rest of the sliders in the same group
  170. */
  171. '#group_type' => 'same',
  172. /**
  173. * When set to TRUE, other sliders in the same
  174. * group will change only if this slider changes
  175. * values : TRUE , FALSE
  176. */
  177. '#group_master' => FALSE,
  178. /**
  179. * Disable buildin range validation
  180. * useful when element is used as widget
  181. * for fields, since integer fields have range validation
  182. * values : TRUE , FALSE
  183. */
  184. '#validate_range' => TRUE,
  185. /**
  186. * In case there are other fields that should be sync dynamically when
  187. * the slider changes
  188. * value : .my_field_css_class
  189. */
  190. '#fields_to_sync_css_selector' => NULL,
  191. /**
  192. * When field is not required, and display_inputs option is inactive
  193. * a checkbox will be shown allowing user to ignore the field
  194. * and enter no value
  195. * values : TRUE , FALSE
  196. */
  197. '#display_ignore_button' => FALSE,
  198. /**
  199. * When the slider does not have any value by enabling this option it won't show the
  200. * the slider handle unless user clicks on the slider to select a value
  201. * values : TRUE , FALSE
  202. */
  203. '#hide_slider_handle_when_no_value' => FALSE,
  204. );
  205. Contributors
  206. ============
  207. - Version 1 : Jonathan Rowny (jrowny), www.jonathanrowny.com
  208. - Version 1 : Tom Kirkpatrick (mrfelton), www.systemseed.com
  209. - Version 2 : Transfer Slider code from "jSlider Form API" : Roman Grachev (http://graker.ru/) , Maslouski Yauheni (http://drupalace.ru/)
  210. - Version 2 : Sina Salek (http://sina.salek.ws) Merged in from jslider_field module