{"id":285,"date":"2020-04-22T06:24:32","date_gmt":"2020-04-22T06:24:32","guid":{"rendered":"https:\/\/localhost\/bricksacademy\/?post_type=bricks_article&#038;p=285"},"modified":"2021-07-06T09:48:54","modified_gmt":"2021-07-06T09:48:54","slug":"slider-control","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/slider-control\/","title":{"rendered":"Slider Control"},"content":{"rendered":"\n<p>The slider control shows a draggable range input field. Default units are <code>px<\/code>, <code>em<\/code> and <code>rem<\/code>. You can set the following control parameters:<\/p>\n\n\n\n<ul><li>units (array with custom units and <code>min<\/code>, <code>max<\/code>, <code>step<\/code> attributes)<\/li><li> unitless (set to <code style=\"font-size: 16px;\">false<\/code> for plain number)<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>class Prefix_Element_Slider extends \\Bricks\\Element {\n  \/\/ Set builder controls\n  public function set_controls() {\n    $this->controls&#91;'exampleSliderFontSize'] = &#91;\n      'tab' => 'content',\n      'label' => esc_html__( 'Font size', 'bricks' ),\n      'type' => 'slider',\n      'css' => &#91;\n        &#91;\n          'property' => 'font-size',\n        ],\n      ],\n      'units' => &#91;\n        'px' => &#91;\n          'min' => 1,\n          'max' => 50,\n          'step' => 1,\n        ],\n        'em' => &#91;\n          'min' => 1,\n          'max' => 20,\n          'step' => 0.1,\n        ],\n      ],\n      'default' => '30px',\n      'description' => esc_html__( 'Slider adjusts font size via CSS.', 'bricks' ),\n    ];\n  }\n\n  \/\/ Render element HTML\n  public function render() {\n    echo '&lt;h3>' . get_bloginfo( 'name' ) . '&lt;\/h3>';\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Resources<\/h3>\n\n\n\n<ul><li><a rel=\"noopener noreferrer\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input\/range\" target=\"_blank\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input\/range<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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) Resources https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input\/range<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":150,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/285"}],"collection":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article"}],"about":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/types\/bricks_article"}],"author":[{"embeddable":true,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/285\/revisions"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}