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:
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:
Step 3 - slider
Add a new Slider PCF object, call it "slider" with this "BasePaletteColor" property:
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:
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
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