I'm developing a web application where the user builds beer recipes. When you're building a beer recipe, it's important to know how the different parameters align with / deviate from the 'accepted' values (as defined by the style you're going for). For example, if you're building a lager and add a bucket of hops, it'd be nice to know at a glance that your hop levels are far too high.
In this image, you can see the parameter's value on the left, and the black marker on the bar represents the value's position in the "sweet spot." The really unfortunate thing about this problem, is (for my application at least) that there's going to be multiple of these indicators close to each other, so repetition can be killer for visually complicated sliders.
My problem with the slider approach, is that while it's relatively intuitive, it gets cluttered when there are multiple near by each other.
My only proposed solution to this, is to simply use a color gradient/stepped gradient and display that color as the "status." It's not dramatically different from the slider approach, I'd just be selecting the color the black marker is at.
Is there a better way to indicate accuracy/deviation for a given range?