The slider control shows a draggable range input field. Default units are px
, em
and rem
. You can set the following control parameters:
- units (array with custom units and
min
,max
,step
attributes) - unitless (set to
false
for plain number)
class Prefix_Element_Slider extends BricksElement { // Set builder controls public function set_controls() { $this->controls['exampleSliderFontSize'] = [ 'tab' => 'content', 'label' => esc_html__( 'Font size', 'bricks' ), 'type' => 'slider', 'css' => [ [ 'property' => 'font-size', ], ], 'units' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], 'em' => [ 'min' => 1, 'max' => 20, 'step' => 0.1, ], ], 'default' => '30px', 'description' => esc_html__( 'Slider adjusts font size via CSS.', 'bricks' ), ]; } // Render element HTML public function render() { echo '<h3>' . get_bloginfo( 'name' ) . '</h3>'; } }