Slider quanity tick marks

  • Resolved clonemykey

    (@clonemykey)


    4 years, 1 month ago

    Hello!

    We’re building a bulk pricing estimator and have a slider that goes from 1 to 100. We’re trying to add tick marks at midway points along the slider at 20,40,80 but can’t figure out the best way to do that. I did try searching for this but I’m not even sure “tick marks” is the correct term. Any guidance would be appreciated.

    Regards,

    Bryan

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @clonemykey

    The process would require some custom code. Please, follow the steps below:

    1. Enter the style definition below into the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png):

    
.ui-slider-tick-mark {
    display: inline-block;
    border-left: 2px solid #DADADA;
    color: #DADADA;
    height: 16px;
    position: absolute;
    top: 12px;
    padding-left: 2px;
}

    2. Insert an “HTML Content” field in the form with the following piece of code as its content:

    
<script>
function setSliderTicks()
{
  var $ = jQuery;
  $('.slider').each(function(){
    var e = $(this),
	max =  e.slider("option", "max"),    
    	spacing =  100 / (max -1);

    e.find('.ui-slider-tick-mark').remove();
    $('<span class="ui-slider-tick-mark">20</span>').css('left', (spacing * 20) +  '%').appendTo(e);
    $('<span class="ui-slider-tick-mark">40</span>').css('left', (spacing * 40) +  '%').appendTo(e);
    $('<span class="ui-slider-tick-mark">80</span>').css('left', (spacing * 80) +  '%').appendTo(e);
  }); 
}
fbuilderjQuery(document).one('showHideDepEvent', function(){setSliderTicks();});
</script>

    Best regards.

    Thread Starter clonemykey

    (@clonemykey)

    That works great! We did update the code to show the tick marks across the line. I provided the updated version below. Thanks!

    <script>
function setSliderTicks()
{
  var $ = jQuery;
  $('.slider').each(function(){
    var e = $(this),
	max =  e.slider("option", "max"),    
    	spacing =  100 / (max -1);

    e.find('.ui-slider-tick-mark').remove();
		$('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * 0) +  '%').appendTo(e);
		$('<span class="ui-slider-tick-numb-single">1</span>').css('left', (spacing * 0) +  '%').appendTo(e);
		$('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * 9) +  '%').appendTo(e);
		$('<span class="ui-slider-tick-numb-double">10</span>').css('left', (spacing * 9) +  '%').appendTo(e);
		$('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * 24) +  '%').appendTo(e);
		$('<span class="ui-slider-tick-numb-double">25</span>').css('left', (spacing * 24) +  '%').appendTo(e); 
		$('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * 49) +  '%').appendTo(e);
    $('<span class="ui-slider-tick-numb-double">50</span>').css('left', (spacing * 49) +  '%').appendTo(e); 
		$('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * 74) +  '%').appendTo(e);
    $('<span class="ui-slider-tick-numb-double">75</span>').css('left', (spacing * 74) +  '%').appendTo(e); 
		$('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * 99) +  '%').appendTo(e);
		$('<span class="ui-slider-tick-numb-triple">100</span>').css('left', (spacing * 99) +  '%').appendTo(e);
  }); 
}
fbuilderjQuery(document).one('showHideDepEvent', function(){setSliderTicks();});
</script>
    .ui-slider-tick-mark {
	  display: inline-block;
    border-left: 3px solid #d0272f;
    opacity: 0.8;
    height: 20px;
    position: absolute;
    margin-top: -8px;
		margin-left: -2px;
}

.ui-slider-tick-numb-single {
    display: inline-block;
    opacity: 1;
    color: black;
    height: 18px;
    position: absolute;
    top: 18px;
    padding-left: 0px;
    border: none;
    margin-left: -4px;
}

.ui-slider-tick-numb-double {
    display: inline-block;
    opacity: 1;
    color: black;
    height: 18px;
    position: absolute;
    top: 18px;
    padding-left: 0px;
    border: none;
    margin-left: -9px;
}

.ui-slider-tick-numb-triple {
    display: inline-block;
    opacity: 1;
    color: black;
    height: 18px;
    position: absolute;
    top: 18px;
    padding-left: 0px;
    border: none;
    margin-left: -14px;
}
    Plugin Author codepeople

    (@codepeople)

    Hello @clonemykey

    Excellent !!!!!

    Best regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Slider quanity tick marks’ is closed to new replies.