Gallery

Power Apps UI Cooker

Introduction

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Range Slider

MyCondy

Last edited 39 days ago by MyCondy

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

18x Container

1x Slider PCF

11x Label

Procedure

Step 1 - create main container

Add a new Vertical Container PCF object, call it "range_slider_comp" with this "DropShadow" property:

DropShadow.Semibold

and Gap property:

Step 2 - create content container

Add a new Horizontal Container PCF object, call it "content_frame" with this "Gap" property:

Add 7 Vertical Containers PCF object, call them "bar_frame_1/2/3/4/5/6/7" with this "Padding" property:

Add 7 Text Input objects under "bar_frame_1/2/3/4/5/6/7", call them "bar_title_1/2/3/4/5/6/7" with this "Text" property:

50/119/199/298/199/119/50

Add 7 Manual Container objects under "bar_frame_1/2/3/4/5/6/7", call them "bar_value_1/2/3/4/5/6/7" with this "BorderRadius" property:

and DropShadow property:

DropShadow.Semilight

Step 3 - slider

Add a new Slider PCF object, call it "slider" with this "BasePaletteColor" property:

RGBA(168, 110, 235, 1)

Step 4 - add range

Add a new Horizontal Container PCF object, call it "range_frame" with default properties.

Add 2 Vertical Container objects under "range_frame", call them "minimum/maximum_frame" with this "Gap" property:

Add 2 Text Input objects under "minimum/maximum_frame", call them "minimum/maximum_title" with this "Text" property:

"Minimum" / "Maximum"

Add 2 Text Input objects under "minimum/maximum_frame", call them "minimum/maximum_value" with this "Text" property:

Min value = Concatenate("$ ",bar_title_1.Text)

Max value = Concatenate("$ ",bar_title_4.Text)

This is an output:

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

19x Frame

1x Slider Component

10x Text

Procedure

Step 1 - create vertical frame

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_range_slider_comp" with these properties:

⁠

⁠

⁠

Step 2 - create content frame

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_content_frame" with these properties:

⁠

⁠

Add 7 Frames (F command) with vertical auto layout (SHIFT + A command) object, call them "vercont_bar_frame_1/2/3/4/5/6/7" with these properties:

⁠

⁠

Add 7 Text (T command) objects under a "vercont_bar_frame_1/2/3/4/5/6/7" frame, call them "lbl_bar_title_1/2/3/4/5/6/7" with these properties:

⁠

⁠

Add 7 Frames (F command) object under a "vercont_bar_frame_1/2/3/4/5/6/7" frame, call them "cont_bar_value_1/2/3/4/5/6/7" with these properties:

⁠

⁠

Step 3 - create slider

Open DesignKit PRO 2.5 version and import Slider PCF component:

⁠

⁠

Step 4 - create range frame

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_range_frame" with these properties:

⁠

⁠

Add 2 Frames (F command) with vertical auto layout (SHIFT + A command) object, call them "vercont_minimum/maximum_frame" with these properties:

⁠

⁠

Add 2 Text (T command) objects under a "vercont_minimum/maximum_frame" frame, call them "lbl_minimum/maximum_title" with these properties:

⁠

⁠

Add 2 Text (T command) objects under a "vercont_minimum/maximum_frame" frame, call them "lbl_minimum/maximum_value" with these properties:

⁠

⁠

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_bar_frame_1/2/3/4/5/6/7 = Vertical Container

horcont_content_frame = Horizontal Container

slpcf_slider = Slider PCF

lbl_minimum/maximum_title = Label

cont_bar_value_1/2/3/4/5/6/7 = Manual Container

YAML Output

⁠

Used Colours

Main Frame Background Colour - #FFFFFF

Min Bars Colour - #DDDDDD

Max Bar Colour - #232323

Slider Colour - #764BB6

Title Colours - #282828

⁠

← Popup Menu⁠

⁠

Rich Text →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.