© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

SLIDER

Build a horizontal or vertical slider that's controlled with one draggable handle.

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: GET STARTED

In your copy of AxureTraining.rp, open the page named “Slider”.


The page comprises a group with two rectangle widgets: one that will be the background of the slider and another that will be the draggable handle.


Click on the group and then again on the handle widget to select it. Right-click it and choose "Convert to Dynamic Panel." (We need to use an OnDrag interaction for the slider, and only dynamic panels can have OnDrag interactions.) In the field at the top of the Inspector, name this new dynamic panel "Handle".

STEP 2: MAKE THE DRAGGING INTERACTION

With "Handle" selected, double-click "OnDrag" in the Properties tab to make a new "OnDrag" case.


In the left column of the Case Editor, click "Move".


In the right column, click "This Widget".


At the bottom of the right column, use the "Move" dropdown to select “with drag x”. This limits the widget to moving horizontally only.


Below this, click “Add boundary”.


In the first dropdown, click “left”. In the next dropdown, click “greater than or equals”. Then click "fx" to edit a value.

Start in the "Local Variables" section at the bottom of the "Edit Value" dialog. You can leave the text "LVAR1" in the first field to create a new local variable called LVAR1.


In the first dropdown, click "widget".


In the last dropdown, click "Background".


Move to the top field in the dialog. Type the following: [[LVAR1.left]]


Click "OK" to close the Edit Value dialog. The first boundary is now set up. The widget can only be dragged as far left as the left side of the "Background" widget.

At the bottom of the right column of the Case Editor, again click “Add boundary” to add one more boundary for the right side of the slider.


In the first dropdown, click “right”. In the next dropdown, click “less than or equals”. Then click "fx" to edit a value.


Start in the "Local Variables" section at the bottom of the "Edit Value" dialog. You can leave the text "LVAR1" in the first field to create a new local variable called LVAR1.


In the first dropdown, click "widget".


In the last dropdown, click "Background (Dynamic Panel)".


Move to the top field in the dialog. Type the following: [[LVAR1.right]]


Click "OK" to close the Edit Value dialog. The second boundary is now set up. The widget can only be dragged as far right as the right side of "Background".


Click "OK" to close the Case Editor.

STEP 3: PREVIEW

Click Preview.


Try dragging the slider handle.

MORE: VERTICAL SLIDER

Try building a vertical slider. Don't forget to change the handle to move "with drag y" and set the boundaries to "top" and "bottom." Need help? Email support@axure.com.

TRY IT!

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE