Skip to main content
SimilarExport ZIP
100%

JavaScript & jQuery - Chapter 12: Filtering, Searching, and Sorting

✓ Published0🌍 Public
BBenHeubl
Last edited Sep 9, 2015
Created on Sep 9, 2015

This example demonstrates an interactive price-range filter for a list of creative freelancers, allowing users to set minimum and maximum hourly rates via a dual-handle slider. The page initially displays a table of names and rates, and the slider dynamically filters the visible rows as the user drags the handles. The implementation relies on jQuery for DOM manipulation and event handling, while the noUiSlider library powers the slider control. The input fields for min and max values stay synchronized with the slider, and the table updates in real time to show only the entries whose rates fall within the selected range.

AI-generated description

Similar vizzes

Loading thumbnail…

JavaScript & jQuery - Chapter 12: Filtering, Searching, and Sorting

This example demonstrates an interactive price-range filter for a list of creative freelancers, allowing users to set minimum and maximum hourly rates via a dual-handle slider. The page initially displays a table of names and rates, and the slider dynamically filters the visible rows as the user drags the handles. The implementation relies on jQuery for DOM manipulation and event handling, while the noUiSlider library powers the slider control. The input fields for min and max values stay synchronized with the slider, and the table updates in real time to show only the entries whose rates fall within the selected range.

BBenHeubl
100% match
Loading thumbnail…

Slider JS

This example demonstrates a dual-range slider interface for filtering numeric attributes. It displays two sets of sliders and corresponding numerical inputs for "HP" and "ATK" values, allowing users to set minimum and maximum thresholds. The sliders use HTML `input[type=range]` elements alongside `input[type=number]` fields, synchronized via event handlers. JavaScript functions like `controlFromSlider` and `fillSlider` manage the interaction, updating a gradient background to visually indicate the selected range. The code also tracks the current range values in a `num_range` object, providing a simple, interactive filtering mechanism for data exploration.

Eexchoco
69% match
Loading thumbnail…

interactive_button_template

This example demonstrates an interactive template for exploring categorical and continuous variables through linked sliders and buttons. Built with D3.js and rendered as an SVG, it uses two d3.slider widgets to let viewers adjust numeric variables (0-12 hours) while selecting categories via the A–H buttons. The interface includes a sentence placeholder and two chart containers, suggesting a filterable visualization where selections drive updates. Though the JavaScript logic is incomplete, the template shows how slider inputs and button filters can be combined for interactive data exploration.

BBenHeubl
60% match
Loading thumbnail…

Range Slider

This example presents a range slider visualization that lets users drag a handle to select a numeric value between 0 and 100. A large circular dragger and a triangular pointer both respond to mouse drags, with a label updating to show the current percentage. The implementation uses the d3-marcon library for layout, along with d3-scaleLinear for mapping data values to pixel coordinates, d3-drag for interactive dragging, and d3-axisBottom for rendering the scale. The slider’s body, axis, and dragger are styled via CSS classes.

FFrissAnalytics
60% match
Loading thumbnail…

Slider test 1

A range slider, built with the d3-simple-slider library, selects an interval on a horizontal axis. The slider’s default value is set between 0.015 and 0.02, and its current selection is displayed as a formatted percentage range in a paragraph. A D3 v6 SVG visualization renders the control, with the slider’s fill color set to blue. The underlying data, drawn from a CSV file, is not used in the interaction.

Llarsboergo
58% match
Loading thumbnail…

Range Slider D3 V4

This example shows an interactive range slider built with D3 v4, where a user can brush along a band scale to select a subset of values from a fixed array of numbers 1 through 10. The visualization displays the current selection as an orange arrow and a label showing the selected range. The slider includes adjustable step size, slider size, and initial index via HTML inputs, with an "Apply" button to update the scale dynamically. The code relies on `d3.scaleBand`, `d3.brushX`, and SVG element manipulation to compute snapped positions and render the selection handle.

CChandrakantThakkarDigiCorp
57% match
Loading thumbnail…

Color Range slider

This example demonstrates an interactive color range slider that dynamically adjusts the displayed hue. Users manipulate the slider to select a specific color value, which updates the visualization in real time. The implementation uses React for component state and rendering, while D3.js (d3.v5) manages the slider’s input handling and color scale transitions. The project references the React Starter template and uses a minimal HTML page with embedded D3 and custom CSS for styling. The color transitions are driven via D3’s interpolation methods, though the exact rendering target is not specified beyond the slider interaction.

SShweta-tech
57% match
Loading thumbnail…

d3-simple-slider

This example demonstrates four interactive slider configurations built with the d3-simple-slider library and D3 v4, each handling a different data type and scale. The sliders showcase value selection for percentages, discrete integer steps, time-based data using JavaScript `Date` objects formatted with `d3.timeFormat`, and dense value arrays with custom tick marks. The code renders each slider as an SVG element via `d3.sliderHorizontal()`, binding change events to update text displays in real time, and includes reset links that programmatically set slider values. The implementation highlights the library’s flexibility in adapting to varied input formats while maintaining a consistent, user-friendly interface.

AAlainRo
57% match