small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="http://ift.tt/2sTx9RH">Framer &#8211; Medium</a> | Tess Gadd </p>
<h4>Everything you need to know, from anatomy to common examples</h4>
<p><img alt="" src="http://ift.tt/2sjKZ2J"></p>
<p>By now you should have a pile of sexy pages and scroll components — so now it is time for a new challenge my friends! Let’s bring everything you already know and use them with sliders. If you still don’t have Framer, make sure to <a href="http://ift.tt/2sTtT8Z">download</a> a free 2 week trial.</p>
<p>Like the other <a href="http://ift.tt/2qahDTf">Cheat Sheets</a> in this series, we will look at the very basics, simple properties and commonly used patterns. This was written for people like me — who aren’t so great at writing code, but are ninjas with good old cmd+c &amp; cmd+v.</p>
<h4>In this Framer Cheat sheet, we will look at the following:</h4>
<ol>
<li>What is the difference between a Slider and a Range Slider?</li>
<li>Anatomy of a slider</li>
<li>Styling</li>
<li>Vertical Slider</li>
<li>Values</li>
<li>Animate to</li>
<li>Events</li>
<li>Common examples</li>
</ol>
<h3>1. What is the difference between a Slider and a Range Slider?</h3>
<p>Sliders need only one value to be inputted. They also indicate a specific degree or quantity of something. How many items? How loud? How long? How big? etc.</p>
<p>Range Sliders need two values to be inputted. This could be date ranges, price ranges, distance ranges, etc.</p>
<h3>2. Anatomy of a slider</h3>
<p>When you create a new SliderComponent or RangeSliderComponent — you automatically create 3 or 4 layers respectively.</p>
<p><img alt="" src="http://ift.tt/2sTvcVc"></p>
<p>A SliderComponent has 3 layers, namely the SliderComponent itself, the knob and the fill . Because the knob and fill are children on the slider, you will have to style them differently.</p>
<p>A RangeSliderComponent has 4 layers, namely the RangeSliderComponentitself, the minKnob, the maxKnob, and the fill. The minKnob will be on the left by default, and the maxKnob will be on the right. Because the knobs and fill are children on the range slider, you will have to style them differently.</p>
<h3>3. Styling</h3>
<p>Styling a slider and a range slider is exactly like styling 3 (or if using a range slider — 4) layers. Your whole component, your fill and your knob(s). Learn more about <a href="http://ift.tt/2lv1Qru">styling layers</a>.</p>
<h4>Styling the slider</h4>
<p>Styling the slider is like styling a layer. You can choose position, height, width, colour etc.</p>
<p><img alt="" src="http://ift.tt/2sTencZ"></p>
<pre>#left example<br>slider = new SliderComponent<br>   width: 300<br>   height: 8<br>   x: Align.center<br>   y: Align.center<br>   backgroundColor: "#144C50"</pre>
<pre>#right example<br>range = new RangeSliderComponent<br>   width: 300<br>   height: 8<br>   x: Align.center<br>   y: Align.center<br>   backgroundColor: "#BD6A41"</pre>
<h4>Fill styling</h4>
<p>The fill shows what is selected in terms of range or amount.</p>
<p>For a slider component you might not always need a fill. For example, if you are choosing the degree of something (e.g. how big it is) you won’t need a fill, but if you are choosing the quantity of something (e.g. how many of something) then you will.</p>
<p>A range slider will usually need a fill for it to make sense.</p>
<p>The fill is styled the same way in a SliderComponent and a RangeSliderComponent .</p>
<p><img alt="" src="http://ift.tt/2sjTn2m"></p>
<pre>#left example<br>slider.fill.backgroundColor = "rgba(255,255,255,0.8"</pre>
<pre>#right example<br>range.fill.backgroundColor = "rgba(255,255,255,0.8"</pre>
<h4>knob styling (Slider Component only)</h4>
<p>Styling the knob is almost like <a href="http://ift.tt/2lv1Qru">styling a layer</a>. Because the knob was created when you first made the slider, you have to style it like so,</p>
<p><img alt="" src="http://ift.tt/2sTBnsu"></p>
<pre>slider.knob.size = 40<br>slider.knob.borderRadius = 40<br>slider.knob.backgroundColor = "#258992"<br>slider.knob.borderWidth = 2<br>slider.knob.borderColor = "#fff"</pre>
<h4>Min and max knob styling (Range Slider Component only)</h4>
<p>Styling the minKnob and maxKnob is like styling a normal slider’s knob.</p>
<p><img alt="" src="http://ift.tt/2skcclE"></p>
<pre>range.minKnob.size = 40<br>range.minKnob.borderRadius = 40<br>range.minKnob.backgroundColor = "#FF9661"<br>range.minKnob.borderWidth = 2<br>range.minKnob.borderColor = "#fff"<br><br>range.maxKnob.size = 40<br>range.maxKnob.borderRadius = 40<br>range.maxKnob.backgroundColor = "#FF9661"<br>range.maxKnob.borderWidth = 2<br>range.maxKnob.borderColor = "#fff"</pre>
<blockquote><p>Do I feel a little bit dirty about the amount of times I said knob in the last section? Yes. Yes I do.</p></blockquote>
<h3>4. Vertical Slider</h3>
<p>Making a vertical slider is easier than it looks. All you have to do is make the height’s value higher than the width.</p>
<p><img alt="" src="http://ift.tt/2sTplzj"></p>
<pre>#left example<br>slider = new SliderComponent<br>   width: 10<br>   height: 100</pre>
<pre>#right example<br>range = new RangeSliderComponent<br>   width: 10<br>   height: 100</pre>
<h3>5. Values</h3>
<p>The point of a slider is to read in a values inputted by a user. So how do we set the range of those values?</p>
<p><img alt="" src="http://ift.tt/2skccSG"></p>
<h4>Min and Max values</h4>
<p>The min (on the left) by default is 0 and the default max is 1 . You can of course change this to anything you want. You can also make the max value lower than the min .</p>
<pre>slider = new SliderComponent<br>   min: 0<br>   max: 100</pre>
<pre>range = new RangeSliderComponent<br>   min: 0<br>   max: 100</pre>
<h4>Value (Slider Component only)</h4>
<p>The value is the determined by the knob’s current position. To set the starting value of the knob, you set the value on the slider. By default it will be the min value.</p>
<p><img alt="" src="http://ift.tt/2sTA5xz"></p>
<pre>slider = new SliderComponent<br>   min: 0<br>   max: 100<br>   value: 75</pre>
<h4>MinValue and maxValue (Range Slider Component only)</h4>
<p>The minValue is determined by the current position of theminKnob and the maxValue is determined by the current position of the maxKnob.</p>
<p><img alt="" src="http://ift.tt/2skcdpI"></p>
<pre>range = RangeSliderComponent<br>  min: 0<br>  max: 100<br>  minValue: 25<br>  maxValue: 75</pre>
<h3>6. Animate to</h3>
<p>You might want to animate your knob to a specific point on load or on an event.</p>
<h4>Animate to value (SliderComponent only)</h4>
<p>If you want your slider’s knob to move to specific point, you can use animateToValue.</p>
<p><img alt="" src="http://ift.tt/2sTpjHH"></p>
<pre>slider = new SliderComponent<br>   min: 0<br>   max: 100<br>   value: 0</pre>
<pre>slider.animateToValue(75, { curve: Spring })</pre>
<h4>Animate to min/maxValue (RangeSliderComponent only)</h4>
<p>Animating to the minValue and the maxValue is similar to animating to a value on a slider.</p>
<p><img alt="" src="http://ift.tt/2skcdWK"></p>
<pre>range = new RangeSliderComponent<br>   min: 0<br>   max: 100<br>   minValue: 43<br>   maxValue: 56</pre>
<pre>range.animateToMinValue(20, {curve: Spring})<br>range.animateToMaxValue(80, {curve: Spring})</pre>
<h3>7. Events</h3>
<h4>on Value change</h4>
<p>When you use .onValueChange it calls for an update when the slider’s value changes — usually by dragging the knob, but can also be triggered from some where else. The old syntax is slider.on &#8220;change:value&#8221;, -&gt; .</p>
<p><img alt="" src="http://ift.tt/2sTBnJ0"></p>
<pre>slider = new SliderComponent<br>   min: 0<br>   max: 100<br>   minValue: 25</pre>
<pre>number = new TextLayer<br>   text: 25</pre>
<pre>slider.onValueChange -&gt;<br>   number.text = Math.round(slider.value)</pre>
<p><strong>PRO TIP: </strong>You can also use .knob.onDrag and .knob.onMove — this relates to the actual movement of the knob and not just the value of the slider. However, .onDrag means that if you let go of the knob and it still moves due to momentum — the <em>number’s text </em>won’t change.</p>
<pre>slider = new SliderComponent<br>   min: 0<br>   max: 100<br>   value: 50</pre>
<pre>number = new TextLayer<br>   text: 50</pre>
<pre>slider.knob.onDrag -&gt;<br>   number.text = Math.round(slider.value)</pre>
<h4>Range slider onValue Change</h4>
<p><img alt="" src="http://ift.tt/2sjBvEB"></p>
<pre>range = new RangeSliderComponent<br>   min: 0<br>   max: 100<br>   minValue: 25<br>   maxValue: 75</pre>
<pre>number1 = new TextLayer<br>   text: 25</pre>
<pre>number2 = new TextLayer<br>   text: 75</pre>
<pre>range.onValueChange -&gt;<br>   number1.text = Math.round(range.minValue)<br>   number2.text = Math.round(range.maxValue)</pre>
<p><strong>PRO TIP: </strong>You can also use .onDrag and .onMove — this relates to the actual movement of the knobs and not jus the value of the slider.</p>
<pre>range = new RangeSliderComponent<br>   min: 0<br>   max: 100<br>   minValue: 25<br>   maxValue: 75</pre>
<pre>number1 = new TextLayer<br>   text: 25</pre>
<pre>number2 = new TextLayer<br>   text: 75</pre>
<pre>range.minKnob.onDrag -&gt;<br>   number1.text = Math.round(range.minValue)</pre>
<pre>range.maxKnob.onDrag -&gt;<br>   number2.text = Math.round(range.maxValue)</pre>
<h4>.onDragEnd and .onDragStart</h4>
<p>.onDragEnd and .onDragStart are useful if you want something to happen when you drag the knob. In the below example, we change the knob colour when you start dragging.</p>
<p><img alt="" src="http://ift.tt/2sTvSKr"></p>
<pre>slider = new SliderComponent<br>slider.center()</pre>
<pre>slider.knob.backgroundColor = "#258992"</pre>
<pre>slider.knob.onDragStart -&gt;<br>   slider.knob.backgroundColor = "#fff"</pre>
<pre>slider.knob.onDragEnd -&gt;<br>   slider.knob.backgroundColor = "#258992"</pre>
<p>Using the .onDragEnd and .onDragStart events are the same on the range slider except you use it with the .minKnob and .maxKnob .</p>
<p><img alt="" src="http://ift.tt/2skcetM"></p>
<pre>range = new RangeSliderComponent<br>range.center()</pre>
<pre>range.minKnob.backgroundColor = "#FF9661"<br>range.maxKnob.backgroundColor = "#FF9661"</pre>
<pre>range.minKnob.onDragStart -&gt;<br> range.minKnob.backgroundColor = "#fff"<br><br>range.maxKnob.onDragStart -&gt;<br> range.maxKnob.backgroundColor = "#fff"<br><br>range.minKnob.onDragEnd -&gt;<br> range.minKnob.backgroundColor = "#FF9661"<br><br>range.maxKnob.onDragEnd -&gt;<br> range.maxKnob.backgroundColor = "#FF9661"</pre>
<h3>8. Common examples</h3>
<p>Here are a few common examples of slider and range slider components that I have used. For ease sake, I have made a slider and range slider in the same file.</p>
<h4>Snap to value</h4>
<p><a href="http://ift.tt/2sTe0PV"><img alt="" src="http://ift.tt/2sjReU4"></a><a href="http://ift.tt/2sTe0PV">http://ift.tt/2sTe0PV</a></p>
<h4>Value flyout</h4>
<p><a href="http://ift.tt/2sTBoMY"><img alt="" src="http://ift.tt/2sk31So"></a><a href="http://ift.tt/2sTBoMY">http://ift.tt/2sTBoMY</a></p>
<h4>Filter items using slider</h4>
<p><a href="http://ift.tt/2sTyqYM"><img alt="" src="http://ift.tt/2ske91z"></a><a href="http://ift.tt/2sTyqYM">http://ift.tt/2sTyqYM</a></p>
<h4>Toggle’s changing colour on drag</h4>
<p><a href="http://ift.tt/2sTQVwk"><img alt="" src="http://ift.tt/2sk9TiM"></a><a href="http://ift.tt/2sTQVwk">http://ift.tt/2sTQVwk</a></p>
<blockquote><p>Hopefully this cheat sheet helped you, and if it didn’t or you want to learn more about something else, please leave a comment bellow, and I will update 🙂</p></blockquote>
<p><a href="http://ift.tt/2sTLT2P"><img alt="" src="http://ift.tt/2prYp8J"></a><a href="http://ift.tt/2sTLT2P"><img alt="" src="http://ift.tt/2oEvsJ7"></a><a href="http://ift.tt/2sksw5Y"><img alt="" src="http://ift.tt/2oEqonR"></a><img src="http://ift.tt/2sjNJwW" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2sTe16r">Framer Cheat Sheets: Slider &amp; Range sliders</a> was originally published in <a href="https://blog.framer.com">Framer</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Framer Cheat Sheets: Slider & Range sliders

Framer Cheat Sheets: Slider & Range sliders

Everything you need to know, from anatomy to common examples

Top Stories