Prototype Advanced Sliders in Seconds

May 19th, 2015

You might’ve noticed that sliders appear everywhere in mobile and desktop user interfaces. They’re used to show progress, change the volume, dial up the brightness or define a price range. We use them all the time, because they’re easy to adjust and have a clear affordance.

However, prototyping advanced sliders from scratch isn’t easy. Thinking through what goes into a slider, you’ll quickly realize there’s a lot going on under the hood. A basic slider consists of a knob, a background and a fill. These are all linked to represent a value within a range. And obviously, we want complete control over the look and feel.

Today, we’re introducing a new component to prototype advanced, fully interactive sliders. SliderComponent gives you all the flexibility you need, so you can focus on getting the user experience exactly right. Let’s have a look at how easy it is to set one up.

Set Up

SliderComponent consists of 3 layers: the slider itself, the fill and the knob. Each layer has its own set of properties that you can play with. Copy and paste the code below into Framer Studio (Update Framer) to get started.

# Create a slider, define a range 
slider = new SliderComponent
    min: 0
    max: 1
    value: 0.5
    knobSize: 30
 
slider.center()

That's it! Your slider is set up and ready to customize. There's a ton of options that come with SliderComponent, so please read the updated documentation to learn more.

Examples

Below are 3 examples to give you an idea of what SliderComponent is capable off. Special thanks to Jay Stakelon's fantastic Framer Animation Playground for inspiring us to create the Curve Editor example.

  • Slider Basics - A basic SliderComponent with an animating knob.
  • RGB Slider - Sliders that adjust the R, G and B values of a backgroundColor.
  • Curve Editor - Sliders that adjust the spring curve values of an animation.
Older Posts