diff --git a/js/components/EqualizerWindow/index.js b/js/components/EqualizerWindow/index.js
index aa845b9e..666259fd 100644
--- a/js/components/EqualizerWindow/index.js
+++ b/js/components/EqualizerWindow/index.js
@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import classnames from "classnames";
 import Volume from "../Volume";
 import Balance from "../Balance";
+import { segment } from "../../utils";
 
 import { BANDS, WINDOWS } from "../../constants";
 import {
@@ -42,10 +43,9 @@ const EqualizerWindow = props => {
     draggable: true
   });
 
-  const v = Math.round(volume);
-  const eqVolumeClassName = v === 50 ? "center" : v > 50 ? "right" : "left";
-  const b = Math.round(balance);
-  const eqBalanceClassName = b === 0 ? "center" : v > 0 ? "right" : "left";
+  const classes = ["left", "center", "right"];
+  const eqVolumeClassName = segment(0, 100, volume, classes);
+  const eqBalanceClassName = segment(-100, 100, balance, classes);
   return (
     <div
       id="equalizer-window"
diff --git a/js/utils.js b/js/utils.js
index a704f37a..db3c11df 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -91,3 +91,7 @@ export const merge = (target, source) => {
   Object.assign(target || {}, source);
   return target;
 };
+
+// Maps a value in a range (defined my min/max) to the corresponding value in the array `newValues`.
+export const segment = (min, max, value, newValues) =>
+  newValues[Math.floor((value - min) / (max - min) * (newValues.length - 1))];
diff --git a/js/utils.test.js b/js/utils.test.js
index d048a74a..c24c6d0a 100644
--- a/js/utils.test.js
+++ b/js/utils.test.js
@@ -7,7 +7,8 @@ import {
   parseViscolors,
   parseIni,
   normalize,
-  denormalize
+  denormalize,
+  segment
 } from "./utils";
 
 const fixture = filename =>
@@ -134,3 +135,24 @@ test("denormalize", () => {
   expect(denormalize(1)).toBe(1);
   expect(denormalize(100)).toBe(64);
 });
+
+describe("segment", () => {
+  it("can handle min", () => {
+    expect(segment(0, 100, 0, [0, 1, 2])).toBe(0);
+    expect(segment(1, 100, 1, [0, 1, 2])).toBe(0);
+    expect(segment(-1, 100, -1, [0, 1, 2])).toBe(0);
+  });
+  it("can handle max", () => {
+    expect(segment(0, 100, 100, [0, 1, 2])).toBe(2);
+    expect(segment(1, 100, 100, [0, 1, 2])).toBe(2);
+    expect(segment(-1, 100, 100, [0, 1, 2])).toBe(2);
+  });
+  it("can handle mid", () => {
+    expect(segment(0, 2, 1, [0, 1, 2])).toBe(1);
+    expect(segment(0, 2, 1.5, [0, 1, 2])).toBe(1);
+    expect(segment(-1, 2, 0.5, [0, 1, 2])).toBe(1);
+  });
+  it("can handle mid", () => {
+    expect(segment(-100, 100, -100, ["left", "center", "right"])).toBe("left");
+  });
+});