vertical slider

Hello @detanatar

You will need some additional code. Please, insert an “HTML Content” field in the form with the following piece of code as its content:

<script>
fbuilderjQuery(document).one('showHideDepEvent', function(){
jQuery('.slider').slider('option', 'orientation', 'vertical');
});
</script>
<style>
#fbuilder .slider{width: 12px !important;}
</style>

Best regards.

Thank you so much.
Will this design work?
—
there will be a vertical slider on the left of the image – shows the height of the object
bottom of the image horizontal slider – shows the width of the object

Hello @detanatar

The code I sent you previously applies the modification to every slider in the form. If you want to modify only one slider, you must assign a class name to the field, for example, vertical-slider

The class names are assigned the fields through their attributes Add CSS Layout Keywords

And the code into the “HTML Content” field would be:

<script>
fbuilderjQuery(document).one('showHideDepEvent', function(){
jQuery('.vertical-slider .slider').slider('option', 'orientation', 'vertical');
});
</script>
<style>
#fbuilder .vertical-slider .slider{width: 12px !important;}
</style>

Best regards.

Great advice.
Thanks.