How can I increase slider thickness (height) to make it easier to click on? | XM Community
Skip to main content
Solved

How can I increase slider thickness (height) to make it easier to click on?

  • May 11, 2022
  • 2 replies
  • 636 views
Z
Forum|alt.badge.img

Hi,
I have chosen to hide the slider handle until the slider is clicked in order to avoid anchoring in my survey. However, the slider is so narrow that clicking on it is rather difficult. Does anyone know how I can increase the thickness (i.e. height from bottom to top) of the slider bar?
Many thanks in advance,
Zak
Screenshot 2022-05-11 at 16.03.31.png

Best answer by Tom_1842

Hi there, try adding the below to the CSS in your survey's Look & Feel:
.Skin .horizontalbar .Slider .track {
height: 30px;
}

.Skin .horizontalbar .Slider .td.BarOuter {
height: 60px;
}

.Skin .horizontalbar .Slider .handle {
height: 50px;
}
Adjust the height values as needed. To adjust the height for specific sliders, you can add the below as JavaScript to the question:
jQuery(".track").css("height", "30px");
jQuery("td.BarOuter").css("height", "60px");
jQuery(".handle").css("height", "50px");

2 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • Answer
  • May 11, 2022

Hi there, try adding the below to the CSS in your survey's Look & Feel:
.Skin .horizontalbar .Slider .track {
height: 30px;
}

.Skin .horizontalbar .Slider .td.BarOuter {
height: 60px;
}

.Skin .horizontalbar .Slider .handle {
height: 50px;
}
Adjust the height values as needed. To adjust the height for specific sliders, you can add the below as JavaScript to the question:
jQuery(".track").css("height", "30px");
jQuery("td.BarOuter").css("height", "60px");
jQuery(".handle").css("height", "50px");

Z
Z
Forum|alt.badge.img
  • Zak
  • Author
  • May 12, 2022

Thanks Tom, that worked the charm

KatF
Terms & ConditionsAccessibility statement