Slider balloon on top

Hello @startitit2

Please, follow the steps below:

1. Insert a “HTML Content” field in the form, and enter 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 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 .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, you should contact me through my private website: Customization

Best regards.

Yeah that was the code, but it adds the balloon below the slider and not on top of it

also it’s not correctly centered, don’t know why

https://i.vgy.me/Z3Mq8u.png

Hello @startitit2

You should edit the styles I sent to adjust it to your needs. Please, edit the “left” CSS rule as: left: -34px; in the style definition:

#fbuilder .ui-slider-handle .cost-slider-tooltip {
    position: absolute;
    min-width: 47px;
    left: -34px;
    top: 34px;
}

I’m sorry, but the support service does not cover the implementation of the users’ projects. If you need a custom coding service, contact me through my private website to define the project.

Best regards.