# Custom range sliders

**URL:** <https://forum.cabbageaudio.com/t/custom-range-sliders/2804>\
**Category:** Cabbage recipes\
**Created:** [13 August 2021 21:02 UTC](https://forum.cabbageaudio.com/t/custom-range-sliders/2804 "2021-08-13T21:02:03Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![rorywalsh](https://forum.cabbageaudio.com/user_avatar/forum.cabbageaudio.com/rorywalsh/32/165_2.png) [@rorywalsh](https://forum.cabbageaudio.com/u/rorywalsh)\
**Post date:** [13 August 2021 21:02 UTC](https://forum.cabbageaudio.com/t/custom-range-sliders/2804/1 "2021-08-13T21:02:04Z")

</div>

@hdale94 and I was discussing how bad the current range sliders look, and were trying to think of an easy way to customise their look. File strip don’t work with range sliders, nor do `imgFile()` identifiers. But fear not, where there a Cabbage, there’s a way 🤣

This simple UDO places two images over a standard `hrange` that has its alpha value set to 0. The images have `mouseinteraction(0)` set, so one can interact with the widget underneath, i.e., the `hrange`. When a user moves the underlying `hrange` the images change bounds. In the instrument code we create a `CustomHRange` UDO for each slider.

Note we only pass the first part of the range slider channel, and always use `Min` and `Max` as the end of each channel name, for example `slider1Min`, `slider1Max`. This was easier than having to parse the slider channel. Full code here.

[customRanges.csd](https://forum.cabbageaudio.com/uploads/short-url/tr0ivSqGNnx1s7l8v0s0mmpMmo8.csd) (3.4 KB)

The animation is just eye-candy 😉