Markers on a slider

Hello @xstanley

Thank you very much for using our plugin.

Please, follow the instructions below:

Insert an “HTML Content” field in the form, and enter the following code as its content:

<script>
	fbuilderjQuery(document).one('showHideDepEvent', function(){
		(function(){
    var $ = fbuilderjQuery, x = 5;
    $('.cff-slider-field .slider').each(function(){
        let e = $(this);
        e.wrap('<div class="'+(e.hasClass('large') ? 'large' : ( e.hasClass('medium') ? 'medium' : 'small') )+'"></div>');
        e.removeClass('small medium').addClass('large');
        for(let i = 0; i <= x; i++) {
						if(i != x) {
						  e.after('<span class="dot" style="position:absolute;left:'+i*(100/x)+'%"></span>');	
						} else {
							e.after('<span class="dot" style="position:absolute;right:0"></span>');
						}
            
        }
    });
	})();
	});
</script>
<style>
#fbuilder .cff-slider-field .dot{
	display:inline-block;
	width: 15px;
	height: 15px;
	background: rgba(29,148,255,0.5);
	border-radius: 20px;
	top:0px;
}
</style>

To vary the number of marks, modify x=5 with the preferred number.

Best regards.

Thank you so much for your super quick answer. It is so helpful! For some reason the markers are not placed correctly, I was trying to figure it out and playing with the script, but I wasn’t successful to fix it. Please see the screenshots: https://i.postimg.cc/s2W35Qnp/image.png. In this example there are 8 values, so x = 7, but the same issue happens also for other number of values.

Thank you!

Hello @xstanley

Please, use the following code instead:

<script>
	fbuilderjQuery(document).one('showHideDepEvent', function(){
		(function(){
    var $ = fbuilderjQuery, x = 7;
    $('.cff-slider-field .ui-slider-range').each(function(){
        let e = $(this);
        for(let i = 0; i <= x; i++) {
					  if(i == 0) {
							e.after('<span class="dot" style="position:absolute;left:-0.6em;"></span>');	
						} else if(i != x) {
						  e.after('<span class="dot" style="position:absolute;left:calc('+PREC(i*(100/x), 4, true)+'% );margin-left:-0.6em"></span>');	
						} else {
							e.after('<span class="dot" style="position:absolute;right:-5px;"></span>');
						}
            
        }
    });
	})();
	});
</script>
<style>
#fbuilder .cff-slider-field .dot{
	display:inline-block;
	width: 1em;
	height: 1em;
	background: #8ec9ff;
	border-radius: 20px;
	top:-5px;
	z-index:1;
	border:2px solid white;
}
</style>

Best regards.

Thank you so much, you are a genius! I see that I must learn JS in order to move forward within web development. I was also trying to differentiate between markers on the left of the handle and on the right, but I couldn’t achieve it (what I mean: https://i.postimg.cc/nz2MMDs2/image.png).

I know I already took too much of your time. I bother you only because I think that the markers can be useful for more people. Sorry and thank you.

Hello @xstanley

The process, in this case, is more complex because it requires implementing events to track the handle position to vary the markers’ styles.

If you need a custom coding service, please, contact us through the plugin website:

https://cff.dwbooster.com/customization

Best regards.

I got it. Thank you very much, I am sure this thread is already very useful for everyone. Cheers!