I'm working on slider for which I want some odd behaviour. I was looking for solutions and librarys but didn't find nothing that fully fits what I need and I have some problem with building it.
I'm trying to create slider for range value. With steps, dynamic min and max value.
Also I found problematic to work with style effect.
Example:
slider with range from 0 - 50
step set to 10
min value is 16 (start value should be same) - to this point slider should be red
start point should be on 16 (which is hard to make when I want steps)
when value is >16 different color and for everything that is not selected like regular grey.
I was trying to use nouislider and overall everywhere I could. If anyone has any idea or solution I will be grateful for any help.
You can set this up in noUiSlider using the "non-linear ranges" and "padding" features.
Basicaly, you'd set up three ranges:
0 to 16, no step
16 to 20, step of 4
20 to 50, step of 10
You'd then disable the first sub range by setting a padding of [16, 0].
The styling you've described can be achieved by styling .noUi-target with your background colors.
Related
I want to create one single slider in Qualtrics where the min, the MAX and the intervals are chosen according to 4 different embedded data. I need help with the Javascript.
Why do I need one single slider? I need a single slider because I have 16 questions in total, and it is easier to recall 16 questions ID rather than 64 different questions ID.
How should the slider change? I need the slider MAX to be either 1, 10, 100 or 177. Moreover, I always need to have 100 possible choices. Therefore, I need to introduce 2, 1, 0 and 0 decimals, respectively.
Why Javascript? Qualtrics does not allow dynamic custom slider values.
What I have tried so far:
I tried using the default options, but they are not helpful.
I tied looking for resolved questions on StackOverflow but only found this thread: Qualtrics: Dynamically adjusting max value of slider
What your post asks is not a specific question, but rather an entire project. To aid you in this, I have broken up your question into subproblems, all of which can be resolved with simple googling.
First, set up your slider so that it ranges from 0 to 100 - that will ensure that the user always has 100 options. You can then perform a calculation to adjust that to any range you would like based on your embedded data (information how to get embedded data in JS can be found in this post or on the Qualtrics JS API). For more information on how to scale to any rage, here's a good place to start. This calculation is critical as you will use it later on to set the exact value of the grid lines (i.e. intervals) as well as the displayed value (if you opt to display value).
NB: Unfortunately, you are forced to set up the slider to range from 0-100, as you cannot set up more than 20 grid lines. If you could, you could have just set up 100 grid lines and removed the grid lines values and used labels instead for guidance, but there you go.
Next, start with a slider that has a single grid line in the options. You can now adjust these grid lines to your intervals. Specifically, to get the field where these gridlines are defined, get the ul with class name numbers in your slider question. This could look something like this:
let numbers = document.getElementById('QID1').getElementsByClassName('numbers')[0]
This numbers variable will now contain an HTML element with its children being a list of li elements, with each defining a different interval - calculate those interval however your heart desires and add them to the numbers element on the DOM. Tip: to see how this works, play around by examining the DOM when you vary the number of grid lines. Hint: careful when you set the widths (as this is your property to calculate) - for 2 grid lines or 4, all of the li elements have a width of 50 or 25, respectively, but for 11 grid lines the two li elements with classes first and last have width of 5 and the rest of the in-between li elements have a width of 10.
To customize the number that is shown in those intervals (to however many decimal places you want), adjust the innerHTML of those li elements.
Your next step is to make sure that if you do end up showing the value to the participant, then that value can only be a "legit" value. After all, we set the slider from 0 to 100, but it could be 50 to 250 and it must only show values 50-52-54 etc. To achieve that, find the element that displays the value and overwrite it with your calculation (the current value scaled to your desired range). To find the elements, use something like this:
document.getElementById('QID1~1~toolTipBox')
This will look for question with ID QID1 and then look at the first choice's toolTipBox. Overwrite the contest by change its innerHTML.
Finally, don't forget to adjust your data when you process it later on. After all, you have access to all embedded fields in the data, simply scale those to get the actual values (as the ones you will get will most likely be 0-100, though I am not 100% sure how Qualtrics decides what value to save in the data).
I have a line chart that uses Range slider and I want to just add some ticks/labels below the range slider. I've search PLOTLY docs but couldn't seem to find a parameter to imply ticks to the chart. Any insights?
Javascript
With the regular slider, we can set a label to each of the defined steps, but it seems there is no possibility to do the same with the rangeslider.
Python
You can use the marks property to set labels (and optionally add styles or even restrict which values can be selected), eg. :
dcc.RangeSlider(
min=min,
max=max,
step=1,
marks={ m: str(m) for m in range(min, max+1) },
value=[min, max]
)
Note :
If slider marks are defined and step is set to None
then the slider will only be able to select values that have been
predefined by the marks. Note that the default is step=1, so you must
explicitly specify None to get this behavior.
#see Marks and Steps
In D3, I want to fill up a vertical bar with 3 different colors. How can this be accomplished?
The bar has a "domain" of 0 to 3.
Red from 0 to 1.5.
Blue from 1.5 to 2.
Yellow from 2 to 3.
I can't figure out how to accomplish this. It seemed really simple, I would use 3 <rect>, each one would have a Y of the lower bound, and a height of the range distance.
This seemed to fail, since for the final bar, my scale returns a height of 0. Am I using scales wrong?
http://jsfiddle.net/7V8vZ/
Ok here is my solution: http://jsfiddle.net/7V8vZ/1/
Basically I couldn't do it with (min,max) data. I had to use a weird (min, height). This let me figure out where to position the rect, and then how tall to make it. Maybe d3 gives a scale meant for this?
I'm assuming there is a lot d3.js I'm not leveraging. So if you have a better way of doing it, please comment or answer!
i have this "Time line", its horizontal it goes like this
00|01|02|03|etc up to 23
Every span that contains a number is 17 pixels, and the "|" line is 1 pixel, the whole image is 431x20 pixels.
I have 2 tags, the user is supposed to pick a "Start" time and a "End" time, i want to know how i can color the image partially using javascript, i am thinking i could put some CSS over it, such as over the image, but i have no idea how to do this using javascript, any help would be greatly apriciated.
It strikes me as fairly simple to absolutely position a DIV on top of your image, with the same height, whatever color you choose, and some appropriate opacity, setting its left edge to (and this is a quick calculation and might be wrong) image.left + (18 * from), and its width to 18 * (to - from + 1) - 1.
But is there a great reason to make your timeline an image in the first place? It sounds even better to me to have a collection of nodes that either have or don't have a "selected" class, each with a "00" - "23" text marker on them. No images needed.
Hello stackoverflow Community,
I am currently facing a problem with the jQuery mobile slider. I have strongly modified the slider. It's working with arrays that contain values the slider is allowed to take.
If you slide to a position that is not in the array it will slide to the nearest value in the array.
My problem now is: The array contains floating point numbers
var m2 = [19.5, 16.5, 14.5, 15, 10, 13];
If my slider needs to slide to 16.5, it instead slides to 17. The actual value of the slider is indeed 16.5 but the bar slides to 17. I don't think the problem is caused by my code since all the values are outputted correctly.
My question now is: Did anyone have a similar problem with the slider? Are there any possible workarounds (or even fixes) for that problem?
I put up the script. You can access it here: http://workidtest.de/ui/new.html
The slider which is affected is the one in the middle.
I also put up the code here:
http://pastie.org/5171015
Thanks in advance,
Thomas
The problem is that jQuery mobile slider rounds up slider value.
I suppose if you want to use 0.5 scale you can multiply all your max value by 2 and assume that 0 stands for 0, 1 stands for 0.5 and 2 stands for 1.
And just multiply your array values by two.