jQuery Range Slider Plugin with Synchronized Inputs (1.34KB)

A lightweight jQuery range slider plugin that enables dual-handle range selection with synchronized input fields. At just 1.34KB, this plugin implements precise range controls for your web applications.

The range slider allows users to select value ranges by dragging handles or via input fields. Handles update dynamically, and the range bar reflects selected values. Input fields accept manual entries while staying synchronized with slider movements.

How to use it:

1. Create a range slider container with track, range bar, and handles:

<div class="range-slider">
  <!-- Slider Track (background line) -->
  <div class="slider-track"></div>
  <!-- Colored Range Bar between the handles -->
  <div class="slider-range"></div>
  <!-- Handle for minimum value -->
  <div class="slider-handle handle-min" data-type="min"></div>
  <!-- Handle for maximum value -->
  <div class="slider-handle handle-max" data-type="max"></div>
</div>

2. Create input fields for manual adjustments:

<div class="inputs">
  <div class="input-group">
    <label for="min-input">Min:</label>
    <input type="number" id="min-input" value="0" min="0" max="1000">
  </div>
  <div class="input-group">
    <label for="max-input">Max:</label>
    <input type="number" id="max-input" value="1000" min="0" max="1000">
  </div>
</div>

3. Load the needed jQuery JavaScript library in the document:

<script src="/path/to/cdn/jquery.min.js"></script>

4. Load the range-slider's main script after jQuery:

<script src="range-slider.min.js"></script>

5. Add the necessary styles for visual presentation:

/* range slider container */
.range-slider {
  position: relative;
  width: 100%;
  height: 50px;
  margin: 40px 0;
}

/* Slider track (the base line) */
.slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  transform: translateY(-50%);
  border-radius: 4px;
}

/* Colored range bar (between handles) */
.slider-range {
  position: absolute;
  top: 50%;
  height: 8px;
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  transform: translateY(-50%);
  border-radius: 4px;
}

/* Slider handles */
.slider-handle {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 2px solid #2575fc;
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  touch-action: none;
  z-index: 2;
}

How it works:

HTML Structure: The basic structure consists of a container (range-slider), a track (slider-track), a colored range bar (slider-range), and two handles (slider-handle handle-min, slider-handle handle-max). Input fields are optional but highly recommended for precise control.

CSS Styling: The CSS positions the elements, styles the handles and track, and creates the visual appearance of the slider. You are free to customize the CSS to match your website's design.

jQuery Logic: The jQuery code handles the dynamic behavior:

• Event Handling: It listens for mousedown, touchstart, mousemove, touchmove, mouseup, touchend, input, and blur events on the handles and input fields.
• Drag Handling: When a user drags a handle, the script calculates the new position, converts it to a value within the defined range (min/max), and updates the handle's position, the range bar's width, and the corresponding input field.
• Input Field Synchronization: If a user types a value directly into an input field, the script validates the input, updates the internal state, and repositions the handles and range bar accordingly. It includes a rawMaxInput variable. This variable stores the value typed by the user. So if the user types a lower number, the slider will visually show a valid range after the user finishes the input.
• Resize Handling: The script listens for window resize events and recalculates the slider's dimensions to keep it responsive.
• State Management: The script maintains currentMin, currentMax and rawMaxInput variables to store effective value.
• The key to the smooth interaction is the updateSliderFromState() function. This function is called whenever a change occurs (handle drag, input change, window resize). It recalculates the positions of the handles and range bar based on the current currentMin, currentMax and rawMaxInput values. The use of percentages for positioning keeps the slider responsive.

---

This awesome jQuery plugin is developed by ramiel7. For more Advanced Usages, please check the demo page or visit the official website.