[Drupal] How to implement jquery Slider in Drupal 7?

JQuery slider allows you to select a value from a numerical range by simply dragging the slider. The following notation notes will help you to configure slider settings in your JavaScript file.

1. min : Minimum value for the slider.
2. max : Maximum value for the slider.
3. orientation : Determines whether the slider handles(i.e. the movement) horizontally or vertically. It's possible values are "vertical" and "horizontal".
4. step: Determines the size of each interval or step that the slider takes between the minimum and maximum orientation.
5. value : Default value for the slider.

You have to create a page call back function to load your JS file.

/**
 * Implements page call back
 */
function MODULE_call_back() {
  drupal_add_library('system', 'ui.slider');
  $page['tabs'] = array(
    '#theme' => 'theme_name_slider',
    '#rows' => array(
      'custom_values' => '',
    ),
    '#attached' => array(
      'js' => array(
        drupal_get_path('module', 'module_name') . '/js/custom.js',
      )
  ));
  return $page;
}

Create the file 'custom.js' and added the following codes to custom.js file

(function ($) {
  Drupal.behaviors.sample_JquerySlider = {
    attach:function(context, settings) {
      $("#custom_slider" ).slider({
        range: "max",
        min: 1,
        max: 10,
        value: 2,
        slide: function( event, ui ) {
          $("#value" ).val( ui.value );
        }
      });
      $("#value").val( $("#custom_slider" ).slider("value"));
    } 
  }
});

Create the file 'custom.tpl.php' and added the following codes to custom.tpl.php file.

<label for="value">Point:</label>
  <input type="text" id="value" readonly style="border:0; color:#f6931f; font-weight:bold;"/>
  <div id="custom_slider"></div>

Get more details on jQuery Slider widget here. For additional help or support, you can contact our experts. We also provide Drupal services to help you maintain Drupal websites.