Create Bubble in Slider

Hello @graicifyd

The Slider UI used by our plugin (the slider control distributed with WordPress) does not include bubbles by default. However, you can add bubbles with some of code and styles, please, follow the steps below:

1. Insert a “HTML Content” field in the form with the following piece of code as its content:

<script>
fbuilderjQuery(document).one('showHideDepEvent', function () {
    jQuery('.slider').each(function () {
        var tooltip = jQuery('<div class="cost-slider-tooltip"><div class="cost-calculator-arrow"></div><div class="cost-calculator-value"></div></div>');
        jQuery(this)
        .on('slide', function (event, ui) {
            tooltip.find('.cost-calculator-value').text(ui.value);
        })
        .find(".ui-slider-handle").append(tooltip);
    });
});	
</script>

2. Enter the following styles definition block into the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png)

#fbuilder .ui-slider{border:0;background: #DDD !important;height:10px;}
#fbuilder .ui-slider{border:0;background: #DDD !important;height:10px;}
#fbuilder .ui-slider .ui-slider-handle
{
	cursor: pointer;
	width: 28px;
	height: 28px;
	top: -10px;
	border: 1px solid #EBEBEB;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	background: #FFF;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
#fbuilder .ui-slider-handle::after
{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin-left: 9px;
	margin-top: 9px;
	background: #56B665;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
#fbuilder .ui-slider-range-min
{
	background: #56B665;
	border-radius: 5px;
}
/***** TOOLTIP ******/
#fbuilder .ui-slider-handle .cost-slider-tooltip
{
	position: absolute;
	min-width: 47px;
	left: -9px;
	top: 34px;
}
#fbuilder .ui-slider-handle .cost-slider-tooltip .cost-calculator-value
{
	position: static;
	width: 100%;
	color: #303030;
	background: #FFF;
	border: 2px solid #56B665;
	padding: 8px 3px 9px;
	text-align: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#fbuilder .ui-slider-handle .cost-slider-tooltip .cost-calculator-arrow
{
	width: 100%;
	height: 8px;
	text-align: center;
}
#fbuilder .ui-slider-handle .cost-slider-tooltip .cost-calculator-arrow::before
{
	content: "";
	border-color: #56B665 transparent;
	border-style: solid;
	border-width: 0 8px 8px;
	width: 1px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;
}
#fbuilder .ui-slider-handle .cost-slider-tooltip .cost-calculator-arrow::after
{
	content: "";
	border-color: #FFF transparent;
	border-style: solid;
	border-width: 0 7px 7px;
	margin-top: -5px;
	width: 1px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;
}

and that’s all.

If you need additional customization service, you should to contact me directly through my website: Customization

Best regards.

Wow…thank you very much. It worked.