Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

CSS Code for special slider design

  • HerrnFugbaum
  • HerrnFugbaum's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 7 months ago #172262 by HerrnFugbaum
CSS Code for special slider design was created by HerrnFugbaum
Participants are asked to determine the perceived position of their ethnic group/ingroup in relation to society. Is it possible to design a slider like the following in Limesurvey and if so, can someone please help me out with the CSS code for that?




Version 3.13.2+180709
Windows 7
Chrome or Firefox
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 7 months ago #172275 by tpartner
Replied by tpartner on topic CSS Code for special slider design
Hmm, that's an interesting exercise in pure CSS.

Assign a CSS class "ingroup-slider" to the question and add these style rules to your custom.css file.

A few notes...

- These were developed for an extension of the Vanilla theme
- Some style rules may not work in obsolete browsers
- You may want to tweak the styles with media calls for mobile devices

Code:
.ingroup-slider .control-label,
.ingroup-slider .slider-horizontal .tooltip,
.ingroup-slider .slider-horizontal .slider-track > div {
  display: none !important;
}
 
.ingroup-slider .answer-item > div.col-sm-8 {
  width: 100% !important;
}
 
.ingroup-slider .slider-container {
  padding: 75px 75px 75px 25px;
}
 
.ingroup-slider .slider-horizontal.slider::before {
  position: absolute;
  top: 0%;
  left: 100%;
  width: 150px;
  height: 150px;
  margin-top: -75px;
  margin-left: -75px;
  padding-top: 5px;
  content: 'Society';
  text-align: center;
  font-weight: bold;
  border: 1px solid #3972A8;
  border-radius: 50%;
  background-color: #C6DCF1;
}
 
.ingroup-slider .slider-horizontal .slider-track {
  height: 2px;
  margin-top: -10px;
  background-image: none;
  filter: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 2px;
  background: #3972A8;
}
 
.ingroup-slider .slider-horizontal .slider-track::before,
.ingroup-slider .slider-horizontal .slider-track::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  content: '';
  border-radius: 50%;
  background: #3972A8;
}
 
.ingroup-slider .slider-horizontal .slider-track::after {
  left: 100%;
}
 
.ingroup-slider .slider-horizontal .slider-handle {
  position: relative;
  top: -40px;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  filter: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid #9CBEDD;
  background-color:transparent;
  background-image: repeating-linear-gradient(45deg, #FFFFFF, #FFFFFF 6px, #9CBEDD 6px, #9CBEDD 9px);
  outline: none !important;
}
 
.ingroup-slider .slider-horizontal .slider-handle::before {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -0.75em;
  content: 'Ingroup';
  text-align: center;
  font-weight: bold;
}


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • HerrnFugbaum
  • HerrnFugbaum's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 7 months ago #172296 by HerrnFugbaum
Replied by HerrnFugbaum on topic CSS Code for special slider design
Thank you so very much!! That worked really well :-)
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose