如何在Otree中添加双范围滑块？求最简实现方案

Hey there! Great question—your hunch about needing to integrate custom components (what you called "new widgets") is spot-on, and there’s a straightforward way to implement a double range slider without overcomplicating your oTree setup. Here’s the step-by-step breakdown:

Why Your Initial Idea Is Correct #

oTree’s default form widgets don’t include a double range slider out of the box, so you’ll need to use a lightweight front-end JavaScript library to add this functionality. We’ll use noUiSlider (a popular, dependency-free slider library) because it’s easy to integrate and customize.

Step 1: Set Up the Library #

First, grab the noUiSlider files (CSS and JS) from their official repo and place them in your oTree app’s _static folder (create the folder if it doesn’t exist). Local files work best for offline testing and avoiding external dependencies.

Step 2: Define Your Player Model #

In your app’s models.py, add two fields to store the min and max values selected via the slider:

from otree.api import BasePlayer, models

class Player(BasePlayer):
    slider_min = models.IntegerField()
    slider_max = models.IntegerField()

These fields will hold the two values from the slider, just like any other oTree form field.

Step 3: Customize the Page Template #

In your page template (e.g., DoubleSliderPage.html), replace the default form rendering with code that adds the slider and syncs its values to hidden input fields (so oTree can process the submission properly):

{% extends "global/Page.html" %}
{% load static otree %}

{% block styles %}
    <link rel="stylesheet" href="{% static 'your_app_name/nouislider.css' %}">
{% endblock %}

{% block content %}
    <form method="post">
        {% csrf_token %}
        
        <!-- Double Slider Container -->
        <div id="double-slider" style="margin: 30px 0;"></div>
        
        <!-- Hidden Inputs to Capture Slider Values -->
        <input type="hidden" name="slider_min" id="min-value">
        <input type="hidden" name="slider_max" id="max-value">
        
        <button class="btn btn-primary" type="submit">Submit</button>
    </form>
{% endblock %}

{% block scripts %}
    <script src="{% static 'your_app_name/nouislider.min.js' %}"></script>
    <script>
        // Initialize the double range slider
        const slider = document.getElementById('double-slider');
        noUiSlider.create(slider, {
            start: [20, 80], // Default starting values
            connect: true, // Highlights the range between handles
            range: {
                'min': 0,
                'max': 100 // Adjust this to match your desired value range
            }
        });

        // Sync slider values to hidden input fields
        slider.noUiSlider.on('update', function(values, handle) {
            if (handle === 0) {
                document.getElementById('min-value').value = Math.round(values[0]);
            } else {
                document.getElementById('max-value').value = Math.round(values[0]);
            }
        });
    </script>
{% endblock %}

Step 4: Test the Functionality #

Run your oTree server and navigate to the page—you’ll see a functional double slider. When you adjust the handles and submit the form, the min and max values will be saved to the slider_min and slider_max fields of the Player model, just like any standard form input.

Alternative: Custom Django Widget (For Reusability) #

If you plan to use this slider across multiple pages, you could wrap the slider logic into a custom Django Widget class. However, this adds more backend code and is overkill for a single use case—the template-based method above is simpler and faster to implement.

内容的提问来源于stack exchange，提问作者Sebastián Ramírez