Skip to content
How to design it in Power Apps
Preview
What does it consist of?
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:
20
Step 2 - create content container
Add a new Horizontal Container PCF object, call it "content_frame" with this "Gap" property:
1
Add 7 Vertical Containers PCF object, call them "bar_frame_1/2/3/4/5/6/7" with this "Padding" property:
5
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:
5
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:
5
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?
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
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.