Hallo, Philipp,
ja, dazu muss man ein bisschen javascript wie auch ein bisschen css in den Fragetext (im Quellcode-Modus) einfügen.
Du hast noch nicht verraten, mit welcher Version Du arbeitest.
Da dringend empfohlen wird, Version 3.x.LTS zu nutzen, hier also die Lösung dafür.
Zunächst das javascript.
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var ticksArray = [
[20, 'Kaum'],
[40, 'Etwas'],
[60, '60'],
[75, 'Einiger-<br>maßen'],
[100, '100'],
[118, 'Ziemlich'],
[140, '140'],
[155, 'Stark'],
[186, 'Sehr<br>stark'],
[205, 'Außer-<br>ordentlich'],
];
insertSliderTicks('{QID}', ticksArray);
});
/* Insert Slider Tick Marks */
function insertSliderTicks(qID, ticksArray) {
var thisQuestion = $('#question'+qID);
$(thisQuestion).addClass('with-inserted-ticks');
$('input:text', thisQuestion).on('slideEnabled',function(){
var thisSlider = $(this);
var thisItem = $(thisSlider).closest('li');
var thisMin = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemin');
var thisMax = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemax');
var thisRange = thisMax - thisMin;
$.each(ticksArray, function(i, val) {
var tickRelativePosition = val[0] - thisMin;
var tickPercent = (tickRelativePosition/thisRange)*100;
// Insert tick marks
$('.slider-handle:eq(0)', thisItem).before('<div class="inserted-tick left-'+tickPercent+'" style="left: '+tickPercent+'%">\
<div class="tick-text">'+val[1]+'</div>\
</div>');
});
});
}
</script>
Du siehst, was in der Variablen "ticksArray" steht; dies kannst Du anpassen.
Und nun das css:
Code:
<style type="text/css">/* Slider Tick Marks */
@media only screen and (min-width: 768px) {
.with-inserted-ticks .slider-container {
padding-right: 50px;
padding-left: 50px;
}
}
.with-inserted-ticks .slider-item {
margin-bottom: 50px;
}
.with-inserted-ticks .slider-container .help-block {
margin: 25px 0 0 -20px;
width: 40px;
text-align: center;
}
.with-inserted-ticks .slider-container .help-block.pull-right {
margin: 25px -20px 0 0;
}
.inserted-tick {
position: absolute;
top: 20%;
height: 30px;
width: 4px;
margin-top: -5px;
margin-left: -1px;
background-color: #DDDDDD;
background-color: green;
}
.inserted-tick.left-0,
.inserted-tick.left-100 {
background-color: transparent;
background-color: green;
}
.inserted-tick .tick-text {
position: absolute;
top: 150%;
width: 100px;
margin-left: -50px;
color: #000000;
text-align: center;
}
@media only screen and (max-width: 768px) {
.inserted-tick.left-0 .tick-text {
margin-left: 0px;
text-align: left;
}
.inserted-tick.left-100 .tick-text {
margin-left: -100px;
text-align: right;
}
}
</style>
Auch hier kannst Du natürlich nach Deinen Wünschen anpassen.
Jedenfalls würdest Du hiermit das angehängte Ergebnis erreichen
Joffm
Topic Author
Würdest du mir verraten wie das umzusetzen ist? Ich nehme an dazu muss man einen Code schreiben, richtig? 
