Open In App

EasyUI jQuery slider widget

Improve
Improve
Like Article
Like
Save
Share
Report

EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

In this article, we will learn how to design a slider using jQuery EasyUI. The Slider widget enables the user to choose a numeric value from a finite range. The type and range of the slider can be customized in the options of the slider.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

<input class="easyui-slider">

Properties:

  • width: It is the width of the slider.
  • height: It is the height of the slider.
  • mode: It indicates what type of slider.
  • reversed: When this property is set to true, the minimum and maximum values will be reversed.
  • showTip: It defines whether to display tip information.
  • disabled: It defines whether to disable the slider.
  • range: It defines whether to display the range slider.
  • value: It defines the default value.
  • min: It defines the minimum allowed value.
  • max: It defines the maximum allowed value.
  • step: It defines the value by which the slider increases or decreases.
  • rule: It defines the label beside the slider.
  • tipFormatter: It is a function to format slider value.
  • converter: It is the converter function that allows users to determine how to convert a value to the slider position.

Event:

  • onChange: It fires when the field value is changed.
  • onSlideStart: It fires when the slider is started to be dragged.
  • onSlideEnd: It fires when the slider has ended being dragged.
  • onComplete: It fires when the slider value is changed by the user.

Methods:

  • options: It returns the slider options.
  • destroy: It destroys the slider object.
  • resize: It sets the slider size.
  • getValue: It gets the slider value.
  • getValues: It gets the slider value array.
  • setValue: It sets the slider value.
  • setValues: It sets the slider value in the form of an array.
  • clear: It clears the slider value.
  • reset: It resets the slider value.
  • enable: It enables the slider component.
  • disable: It disables the slider component.

CDN Link: First, add jQuery Easy UI scripts needed for your project.

<script type=”text/javascript” src=”jquery.min.js”></script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”>  </script>

Example 1:

HTML




<html>
<head>
  
  <!-- EasyUI specific stylesheets-->
  <link rel="stylesheet" 
        type="text/css"
        href="themes/metro/easyui.css">
  
  <link rel="stylesheet" 
        type="text/css"
        href="themes/mobile.css">
  
  <link rel="stylesheet" 
        type="text/css" 
        href="themes/icon.css">
  
  <!-- jQuery library -->
  <script type="text/javascript" 
          src="jquery.min.js">
  </script>
  
  <!-- jQuery libraries of EasyUI -->
  <script type="text/javascript"
          src="jquery.easyui.min.js">
  </script>
  
  <!-- jQuery library of EasyUI Mobile -->
  <script type="text/javascript" 
          src="jquery.easyui.mobile.js">
  </script>
  
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <h3>EasyUI jQuery slider widget</h3>
  
  <!-- Define the EasyUI slider with markup -->
  <input id="gfg" class="easyui-slider">
</body>
</html>


Output:

Example 2:

HTML




<html>
<head>
  <!-- EasyUI specific stylesheets-->
  <link rel="stylesheet" 
        type="text/css" 
        href="themes/metro/easyui.css">
  
  <link rel="stylesheet" 
        type="text/css"
        href="themes/mobile.css">
  
  <link rel="stylesheet" 
        type="text/css"
        href="themes/icon.css">
  
  <!--jQuery library -->
  <script type="text/javascript"
          src="jquery.min.js">
  </script>
  
  <!--jQuery libraries of EasyUI -->
  <script type="text/javascript"
          src="jquery.easyui.min.js">
  </script>
  
  <!--jQuery library of EasyUI Mobile -->
  <script type="text/javascript" 
          src="jquery.easyui.mobile.js">
  </script>
</head>
<body>
  
  <h1>GeeksforGeeks</h1>
  <h3>EasyUI jQuery slider widget</h3>
  
  <div style="padding: 25px">
      
    <!-- Define the element that will
    created as the slider -->
    <input id='gfg'>
  </div>
  
  <script type="text/javascript">
  
    // Initialize the EasyUI slider
    $('#gfg').slider({
      height: "250px",
      mode: 'v',
      min: 0,
      max: 9,
      showTip: true
    });
  </script>
</body>
</html>


Output:

Reference: https://www.jeasyui.com/documentation/slider.php



Last Updated : 31 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads