I built a custom range slider for Retool with a histogram built in

Ghofrane Baaziz — Mon, 24 Nov 2025 13:24:21 +0000

I built a custom range slider for Retool with a histogram built in

Range sliders in Retool are great until you need to understand your data. They let you pick min and max values, but they don’t tell you anything about the distribution itself.

I kept running into this when building internal tools, so I built a custom range slider that includes a histogram, handles uneven distributions and exposes clean values. It’s written in TypeScript and works as a native Retool component.

🔗 GitHub repo: https://github.com/StackdropCO/custom-range-slider-retool-component

🔗 More Awesome Retool components here: https://github.com/StackdropCO/awesome-retool-components

Here’s why I built it and how to use it.

Why I built this

A real example that pushed me to do this:

I needed a filter for “years of experience” inside a Retool app. Most candidates had between 0 and 20 years, but a few outliers had 45 years. With the standard slider, you get min and max, but no clue whether the middle ranges are empty or dense.

It forces you to guess, or worse, manually inspect the dataset.

To show what I mean:

Retool’s default slider (no visibility):

Custom Range Slider with distribution visible:

The histogram makes it obvious where your data actually sits. In my case, the “20 to 45 years” range was basically empty. With a logarithmic scale, even large skewed values become readable.

This small change makes filtering more honest and more useful.

What I focused on while building it

Here are the engineering decisions that mattered:

Histogram built in

Shows distribution directly on the slider.
Multiple scales

Linear, logarithmic and square root for different distribution shapes.
Clean values

Access the selected range through selectedRange.start and selectedRange.end.
Flexible inputs

Arrays, number lists, query outputs — anything numeric.
Click-to-select

Click any histogram bar to jump to that range.
Custom colors

Fully themeable inside Retool.
Negative values supported

Useful for datasets that include offsets or deltas.

Installation

Clone the repo:

git clone https://github.com/StackdropCO/custom-range-slider-retool-component.git

Install dependencies

cd custom-range-slider
npm install

Log in to Retool and initialize

npx retool-ccl login
npx retool-ccl init

Start development mode

npx retool-ccl dev

Deploy the component

npx retool-ccl deploy

Using it in Retool

Drag the Range Slider component onto the canvas.
Define start and end values:

start: 0

end: 50
Custom formatting:

(v) => {
  if (v === 0) return `${v}`
  if (v === 1) return "1 year"
  return `${v} years`
}

Bind distribution data:

{{ query2.dataArray }}
Access the selected range:

const { start, end } = customRangeSlider1.selectedRange

Switch scales if your data is skewed:
- Linear (default)
- Logarithmic
- Square root

Quick checklist

Use a published version for production
Test locally with npx retool-ccl dev
Deploy and pin the version in your Retool app
For multi-instance setups, use npx retool-ccl sync

What's next

A few improvements I'm exploring:

Auto-generated histograms from simple arrays
More control over spacing and styling
Optional statistics like mean and median
Additional scale types
General cleanup and refinements

Get involved

I built this to make filtering inside Retool more accurate, especially with uneven distributions. It's fully open source, and I'd love feedback, ideas or pull requests.

If you try it, let me know how it works for you.

Happy building!

Resources

Interested in learning more about this component? Check out the full component library and documentation.

Forem: Ghofrane Baaziz

I built a custom range slider for Retool with a histogram built in