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

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.