Deprecated, use core RangeSliderComponent instead

RangeFilter Module for Framer

A simple module for creating range filter with slider.

How To Install

or

• Download the module
• Copy the RangeFilter.coffee file to your prototype's modules folder.
• Call {RangeFilter} = require "RangeFilter" in your Framer prototype.

Try the live demo

How To Use

Initialize default range filter

priceyCoats = new RangeFilter

Set the slider range values

priceyCoats = new RangeFilter
  from: 499
  to: 2899

Animate to a Specific Range

Call the goTo() method

priceyCoats.goTo(699, 1999)

Read the Range Values

Current values set at a filter are the object's keys ›bottom‹ and ›top‹

priceyCoats.on Events.PanEnd, ->
	print priceyCoats.bottom
	print priceyCoats.top

Customizable features

from & to

Set the range of your filter. Default ›from 1 to 100‹

	from: 499
	to: 2899

bottom &/or top

Initialize your filter with a custom active range. Default ›same as from/to‹. You can define none / one of these / both of these options.

	bottom: 699
	top: 2199

backgroundColor

Set the color of the range bar (inactive/background)

	backgroundColor: "rgba(239,244,244,1)"

width

Set the width of filter range bar. Default ›600‹

	width: 500

height

Set the height of filter range bar. Default ›12‹

	height: 8

borderRadius

Set the corner radius for the filter range bar. Default ›half of height‹

	borderRadius: 0

activeRange

Set the color of the active range.

	activeRange: "rgba(0,0,0,0.6)"

knobColor

Set the color of controller knobs.

	knobColor: "rgba(239,242,242,1)"

knobSize

Set the size of controller knobs. Default ›80‹

	knobSize: 40

knobRadius

Set the corner radius of controller knobs. Default ›half of knobSize‹

	knobRadius: 5

knobBorder

Set a border width of controller knobs. Default ›2‹

	knobBorder: 1

knobBorderColor

Set the color of controller knobs' borders.

	knobBorderColor: "rgba(0,0,0,0.2)"

knobShadowColor

Set the shadow color for controller knobs.

	knobShadowColor: "rgba(201,203,203,0.3)"

showValue

Say if you want to show the text values above each knob. Default ›true‹

	showValue: false

valueColor

Set the color of text values above controller knobs.

	valueColor: "rgb(130,130,130)"

valueSize

Set the size of text value above controller knobs. Default ›"34 px"‹

	valueSize: "20px"

currency

Set the currency symbol in front of the text values. Default ›€‹

	currency: "¥"