FramerSlider

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 finallyto 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.