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.

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.