I'm currently designing a slider that will be used to allocate a fixed budget to different channels. I posted some shots of the current design below. Right now, it's possible to simply drag the slider handles to change the allocation, but you can also type in a value by clicking on the numbers at the top.

The main problem is, that there are a couple new channels coming in the near future, and I'm not sure that this solution will work just as well with so many options. The color coding will be a mess, and the width of each section would be so small, that it could be finicky to change the settings later on. Do you have any suggestions on how to improve this design, or even do something completely different to solve this?

Main View of Slider

Edge Case of Slider

5 Answers 5


Main problem with the sliders is that ordering is important: you cannot easily move €30 from Channel 2 to Channel 5.

I see the following operations as relevant:

  • increasing one channel's budget by decreasing the budget of one other channel
  • increasing (decreasing) one channel's budget by proportionally taking (adding) bits from (to) other channels

In principle these operations could be encoded with a set of sliders - in extension to user25327' reply:

Channel 1       [---|€20|-------------------------] [lock] [fix]
Channel 2       [------------|€200|---------------] [lock] [fix]
Channel 3       [---------------|€300|------------] [lock] [fix]

Available       [----------|€-20|-----------------] 
                [spread proportionally] [spread evenly]

The last slider would indicate the available budget after considering the current allocaiton (negative if over budget). [fix] would add the available budget to (or subtract the missing budget from) a single channel (that button is in desperate need of a better name).

[spread evenly] would split the available budget between all channels (respecting limits, of course); in above example subtract €7/7/6 respectively.

[spread proportionally] would distribute the available budget similarly, but use the current allocation as weight (subtract €1/€8/€11, respectively)

[lock] would prevent the respective channel from participating in any spreading.

The core idea is not to enforce the "budget" constraint in the UI, because reallocation is by nature a two-step process (take it away from here, add it there), and the "available" row would act as your carry-over.

Sliders in general:

While the sliders can make it "look fun", I would argue against them. Precision allocation is only useful if there are few choices (say, for a budget of €500, steps of €10). Fiddling with the slider jumping between €50.01 and €49.99 is infuriating.

For a large number of channels, only a small range of the sliders is useful. (e.g. with 10 channels, on average 10% of the slider's width would be used).

I woud recommend a numeric input for each channel, and an on-the-fly visualization in a nice chart.


This original solution is attractive, but I agree with your assessment that it is not scalable. I would also argue that it is somewhat counter-intuitive because of its horizontal but proportional nature.

For starters, I would change this interaction pattern to a set of linked fader controls. Something like what's found here for adjusting Bass & Treble:

Audio Fader control example

An advantage of using this pattern is that you can give the user an immediate visual curve by which to express their budget allocations, as well as being able to programmatically tie each individual channel to a pool of available funds.

In doing this, you are now allowing for scale to increase in the future. You will also be able to retain your idea of assigning a color to each channel, if so desired. If you want, you can add a numeric spinner (html number input) above or below each channel's vertical slider in order to represent the amount of funds assigned. Validation could be a little tricky, but by providing the user multiple inputs to adjust, they will have a quick way to re-flow the fund assignment per channel.

Hope this helps in giving you some ideas on where to take this.


See this picture, a great example how Humble Bundle solves your problem:

Example picture

You see the three main sliders: Developers, Charity and Humble Tip. You can see, how they find a solution for the "Charity" slider, which is divided into two others sliders which can be changed without moving the other sliders - subsliders.

  • 1
    What happens if I increase one of the subsliders, will it be equally subtracted from the others? Nov 26, 2014 at 11:03
  • Of course. The parent Slider does not move, indeed.
    – tjati
    Nov 26, 2014 at 11:04

Can't you remove the handles between the channels inside the slider and just use the signs above as handles? If it gets to tight, can you put every other below the channel?

If all this fails and it's too messy - separate each channel into its own slider.


As an alternative if you want to keep the original design the limitations can be fixed.

Provide a min width so they are not squeezed too tight.

Provide a data entry field by clicking on the amount popup to provide for finer amounts

Finally when the number of channels grows show each channel in a vertical format as in Peters message.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.