Create a tab bar with swipe/pan interactions like the one of Google search options that you can see when you are using your smart phone. You just need pan events and a little of CSS. I have used MDL for the basic mockup and Hammer for pan gesture. Try to drag the tabs 😉
In the first example we are going to define the area of a circle depending on where we click within a box area. We can handle this using JavaScript events, a little bit of basic maths and CSS.
In the second example we are going to define the area using Hammer.js which helps us to add support for touch and muti-touch gestures. In this case you can pinch in and pinch out with your fingers to define the area (you can use an horizontal pan as well) and you can do a vertical pan movement with your finger to change the saturation of the circle.
If you are in a multi-touch device you can pinch and pan with your fingers, if not use horizontal and vertical pan with your mouse. The events will be catched inside and outside of the black box.