Framer Slider

INTRODUCTION

From adaptive sliders created in Design to fully functional ones in Code. A Framer module that allows you to design sliders and then bring them to life, without losing customizability. Appearance and logic—separated.

Get Started

First, grab the slider.coffee file and place it within the /modules folder (located within your .framer folder). Then, to include the module, require the Slider class:

# Include the module
{Slider} = require "slider"

The Slider.wrap method takes three parameters:

• background — The background layer of the slider.
• fill — The fill layer of the slider.
• knob – The knob layer of the slider.

All of these can be styled completely in the design. The method wraps a component around these 3 layers to handle all of the sliding functionality for you.

# Wrap slider logic
Slider.wrap(background, fill, knob)

To customize the Slider, you can store it in a variable.

# Wrap slider logic
slider = Slider.wrap(background, fill, knob)

This allows you to customize its properties, like the min, max and value.

# Set range, default value
slider.props = 
	min: 0
	max: 100
	value: 50

And finally—to output its values, you can use the onValueChange method.

# Update value & print output
slider.onValueChange ->
	print slider.value

---

Examples

• Slider Wrapping. Simple example with realtime value.
• Value Modulating. Adjust the background color of a layer.
• Gradient Sliders. Adjust the properties of a linear gradient.
• Photo Filters. Adjust saturation, contrast and grayscale filters.
• See the Framer Audio module for more.

---

Resources

• SliderComponent Properties — Discover all properties.
• SliderComponent Events — Discover all events.
• SliderComponent Guide — See the official beginners guide.
• Utils.Modulate Docs — Learn how to convert value ranges.

---

Contact

• Follow me @benjaminnathan.
• Follow @framer.