Browser: Any
OS: Windows
when creating elements, I have problems when using the slider control with any other unit other than pixel. Is this a known bug or am I doing something wrong (stuck fairly close to the docs imo)?
I tried different units (cqw, rem, em), but nothing seems to work.
Edit: When using a different unit other than ‘px’, the slider ignores any ‘min, max & step’-attributes and the range changes from -9999 to 9999.
Cheers Suat
Hi @UserfreundSuat,
Thank you for your report. Yup you’re right, I was able to replicate the bug as well. I have added an internal ticket to address this 
Hi Suat,
We’ve fixed this issue in Bricks 1.9.2 beta, now available as a manual download in your account (see changelog).
Please let us know if you are still experiencing issues.
As with any beta release, please do not use it on any production/live website. It is only meant for testing in a local/staging environment.
Actually I am still experiencing the some issues when useing the bricks 1.9.2 beta.
I’m using Bricks with ‘Mobile-First’-Breakpoints. Whilst your fix seems to have fixed it for the largest Breakpoint (works as expected even with custom unit like ‘cqw’), the slider has the same bugged behaviour on all other breakpoints.
This is my Element if you want to test it yourself:
<?php
if (!defined('ABSPATH')) exit;
class UF_DUAL_HEADING extends \Bricks\Element
{
public $category = 'basic';
public $name = 'uf-dual-heading';
public $icon = 'ti-smallcap';
public $css_selector = '.uf-dual-heading';
public function get_label()
{
return 'Dual Heading';
}
public function get_keywords()
{
return ['Überschrift', 'Title', 'Titel'];
}
public function set_controls()
{
$this->controls['heading'] = [
'tab' => 'content',
'label' => 'Überschrift',
'type' => 'text',
'default' => 'Überschrift ..',
'placeholder' => 'Überschrift ..',
];
$this->controls['subheading'] = [
'tab' => 'content',
'label' => 'Unterüberschrift oder Claim',
'type' => 'text',
'default' => 'Unterüberschrift oder Claim ..',
'placeholder' => 'Unterüberschrift oder Claim ..',
];
$this->controls['headingTag'] = [
'tab' => 'content',
'label' => 'HTML-tag',
'type' => 'select',
'options' => [
'h1' => 'H1',
'h2' => 'H2',
'h3' => 'H3',
'span' => 'span',
],
'inline' => true,
'clearable' => false,
'default' => 'H2',
];
$this->controls['semanticSwitch'] = [
'tab' => 'content',
'label' => 'HTML-Tag auf Unterüberschrift übertragen',
'type' => 'checkbox',
'inline' => true,
];
//Schriftgröße
$this->controls['contentSeparator'] = [
'label' => 'Schriftgröße',
'type' => 'separator',
];
$this->controls['fsHeading'] = [
'tab' => 'content',
'label' => 'Überschrift',
'type' => 'slider',
'units' => [
'cqw' => [
'min' => 4,
'max' => 10,
'step' => 0.1,
],
],
'css' => [
[
'property' => 'font-size',
"selector" => '.dual-heading__heading'
],
],
'default' => '7cqw',
];
$this->controls['fsSubHeading'] = [
'tab' => 'content',
'label' => 'Unterüberschrift',
'type' => 'slider',
'units' => [
'cqw' => [
'min' => 4,
'max' => 10,
'step' => 0.1,
],
],
'css' => [
[
'property' => 'font-size',
"selector" => '.dual-heading__subheading'
],
],
'default' => '5cqw',
];
}
public function render()
{
$settings = $this->settings;
$_root = $this->render_attributes('_root');
$heading = !empty($settings['heading']) ? $settings['heading'] : false;
$subheading = !empty($settings['subheading']) ? $settings['subheading'] : false;
$headingTag = !empty($settings['headingTag']) ? $settings['headingTag'] : false;
$semanticSwitch = !empty($settings['semanticSwitch']) ? $settings['semanticSwitch'] : false;
if ($semanticSwitch) {
$subheadingTag = $headingTag;
$headingTag = 'span';
} else {
$subheadingTag = 'span';
}
$root_classes[] = "uf-dual-heading";
$this->set_attribute('_root', 'class', $root_classes);
if (!$heading) {
return $this->render_element_placeholder(['title' => 'Bitte Überschrift eintragen.']);
}
if (!$subheading) {
return $this->render_element_placeholder(['title' => 'Bitte Unterüberschrift eintragen.']);
}
$output = '<div ' . $_root . '>';
$output .= '<' . $headingTag . ' class="dual-heading__heading" >' . $settings['heading'] . '</' . $headingTag . '>';
$output .= '<' . $subheadingTag . ' class="dual-heading__subheading" >' . $settings['subheading'] . '</' . $subheadingTag . '>';
$output .= '</div>';
echo $output;
}
}
Edit:
One Image show the Element-Controls being bugged in backend whilst on base-breakpoint.
The other shows the Frontend Inspector.
Hope this Helps!
Hi @UserfreundSuat,
Thank you so much for the update. I have created another ticket to address this as well.
Hi Suat,
We’ve fixed this issue in Bricks 1.9.2, now available as a one-click update in your WordPress Dashboard.
Changelog: Changelog – Bricks
Please let us know if you are still experiencing issues.
Best regards,
timmse
Functionality is now completly fine, but I noticed a small visiual bug for mobile first designs.
Normally Control fields inherit the value and position of the slider of breakpoints, where a value was set. If you design mobile first higher breakpoints don’t inherit either the value nor the position of the slider.
But if you put a value in the highest breakpoint, all those below inherit it’s value and slider position.
Made some Screenshots to examplify:
Mobile First Base Breakpoint:
After Adding some Value to Desktop Breakpoint:
Hi Suat,
Yep, we already know the problem and have received various reports about it. Unfortunately, this is not only the case with the slider. We are working on it!
