Show the selected value on the slider

Hello @cristianxsava

If you want to display a tooltip with the slider, 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 style definition through 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;overflow:visible !important;}
#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: #0fc2cc;
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 #0fc2cc;
	padding: 0;
	text-align: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
font-size: 0.9em;
}
#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: #0fc2cc 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;
}

From this point you can customize the appearance as you want, editing the CSS rules above.

Best regards.

It worked! Thank you! One last question on this topic… Can I have the little box appear only when I start moving the slider only?

• This reply was modified 4 years, 7 months ago by cristianxsava.

Hi,
Please tell me how to remove the tooltip when the slider is inactive.
In other words, I want the tooltip to appear only when I start moving the slider.
Thank you!!

Hello @cristianxsava

You can use the following block of CSS rules:

#fbuilder .ui-slider-handle .cost-slider-tooltip{display:none;}
#fbuilder .ui-slider-handle:hover .cost-slider-tooltip{display:block;}

I’m sorry, but the support service does not cover the implementation of the users’ projects. If you need a custom coding service to personalize the form’s design, you should contact me through my private website: Custom Coding Service

Best regards.

Thanks a lot!