Slider without anchoring effect

458 views
Skip to first unread message

Hakan Pusmaz

unread,
Jun 20, 2021, 9:21:52 AM6/20/21
to oTree help & discussion
Hello guys, 

I would like to implement a slider without the anchoring effect. My actual solution is to change the slider thumb with jquery. But I can't manage with jquery to change the slider thumb for the browser firefox. May someone help me? Or, is there another solution to avoid the anchoring effect with a slider?

kind regards,
Hakan

Max R. P. Grossmann

unread,
Jun 20, 2021, 3:48:54 PM6/20/21
to Hakan Pusmaz, oTree help & discussion
Hi Hakan,

Something like this?

https://lab.games/join/lidijate

Vic van Pelt also has an approach: https://www.accountingexperiments.com/post/sliders/

Best,

Max
> --
> You received this message because you are subscribed to the Google Groups "oTree help & discussion" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to otree+un...@googlegroups.com.
> To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/537934d6-bee7-49cc-877f-fb3b2881a979n%40googlegroups.com.

Hakan Pusmaz

unread,
Jun 20, 2021, 4:16:38 PM6/20/21
to oTree help & discussion
Hi Max,

thank you! Exactly what I want. I have already tried the approach of Vic van Pelt. It works fine with WebKit browsers. But I could not manage it to work with the Firefox browser. But your example works. May I have your code?

kind regards,
Hakan

Max R. P. Grossmann

unread,
Jun 20, 2021, 4:22:09 PM6/20/21
to Hakan Pusmaz, oTree help & discussion
Hi Hakan,

Sure, just press Ctrl+U on the "Slider" page and copy the relevant parts (lines 29 to 119, inclusive).

Best,

Max
> To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/eeef2e35-b5dd-4c4d-af25-14a2a91384fdn%40googlegroups.com.

Max R. P. Grossmann

unread,
Jun 22, 2021, 4:36:35 AM6/22/21
to ot...@googlegroups.com
Hi all,

I have just uploaded my slider solution to GitLab. Please check it out:

https://gitlab.com/gr0ssmann/otree_slider

Looking forward to your feedback!

Best,

Max


On 21/06/20 06:21am, 'Hakan Pusmaz' via oTree help & discussion wrote:

Chris @ oTree

unread,
Jun 22, 2021, 6:30:42 PM6/22/21
to oTree help & discussion
Nice!

Vic vP

unread,
Sep 19, 2021, 7:14:51 AM9/19/21
to oTree help & discussion
Added a link to Max' slider to the original post you found. Thanks for pointing this out.

salvator...@gmail.com

unread,
Dec 10, 2021, 7:22:22 AM12/10/21
to oTree help & discussion
This slider looks great. Thank you for making it available for everybody!

Can you or anybody else help me to understand how to use this slider to submit a form in oTree? 

From the docs (https://otree.readthedocs.io/en/latest/forms.html#raw-html-widgets), I understand that I have to "use JavaScript to write the results into a hidden form field" but I'm not sure how to do this (and the snippet of code offered in the docs seems to save "42" in the database regardless of the value selected on the slider).

Thanks!

Salvo

Max R. P. Grossmann

unread,
Dec 10, 2021, 7:28:34 AM12/10/21
to salvator...@gmail.com, oTree help & discussion

Hi Salvo,

It should be sufficient to copy and paste the code from the page: https://gitlab.com/gr0ssmann/otree_slider/-/blob/main/SliderPage.html

You might want to make certain adjustments, especially in lines 32-34.

Note how line 115 already contains a hidden form field for an oTree field called "price".

You can also send me your code and I can take a look at it.

Best,

Max

Flavia Tinner

unread,
Jan 5, 2022, 5:02:44 AM1/5/22
to oTree help & discussion
Hi 

Thank you for the excellent slider. Works like a charm. 
I was trying to adjust the code such that it will raise an error if the slider has not been touched before a participant wants to proceed to the next page. I have been trying to implement Phillipp's solution, however without any success. 

Any input on how to achieve this would be greatly appreciated. 

Thank you. 

Max R. P. Grossmann

unread,
Jan 5, 2022, 6:55:10 AM1/5/22
to Flavia Tinner, oTree help & discussion
Hi,

You're in luck: I just released a new version of my oTree sliders, which among many improvements also now use mandatory fields by default:

https://gitlab.com/gr0ssmann/otree_slider

Best,

Max



On 22/01/05 02:02am, Flavia Tinner wrote:
> Hi
>
> Thank you for the excellent slider. Works like a charm.
> I was trying to adjust the code such that it will raise an error if the
> slider has not been touched before a participant wants to proceed to the
> next page. I have been trying to implement Phillipp's solution
> <https://stackoverflow.com/questions/39113641/mandatory-slider-in-otree-django>,
> > <https://groups.google.com/d/msgid/otree/f5a36ede-7b4b-4f8a-8623-bfdbb54c45ben%40googlegroups.com?utm_medium=email&utm_source=footer>
> > .
> >
> >
>
> --
> You received this message because you are subscribed to the Google Groups "oTree help & discussion" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to otree+un...@googlegroups.com.
> To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/becb442f-b560-4ff8-a2fb-c793f82380f4n%40googlegroups.com.

Reply all
Reply to author
Forward
0 new messages