CSS Code for special slider design

More
1 week 3 days ago #172262 by HerrnFugbaum
HerrnFugbaum created the topic: CSS Code for special slider design
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
Attachments:

Please Log in or Create an account to join the conversation.

More
1 week 3 days ago #172275 by tpartner
tpartner replied the 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

.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.
Attachments:
The following user(s) said Thank You: LouisGac

Please Log in or Create an account to join the conversation.

More
1 week 1 day ago #172296 by HerrnFugbaum
HerrnFugbaum replied the topic: CSS Code for special slider design
Thank you so very much!! That worked really well :-)

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!