jQuery slider in a Python/Django SessionWizardView

I have created a Data Verification page in a Django SessionWizardView where a user has to confirm an earlier submitted rating of an image using a jQuery UI Slider (-100 - +100)

The below slider starts off at the same point the user has previously rated the image at by adding a Django template variable. value: {{first_slider}},

My issue is that I would prefer to 'externalise' this script or to somehow otherwise condense it as I will need to add nine of such to the page.

I tried to make an external JS file and include the necessary Django template tags but this did not work.

wizard_form.html

```
{% extends "base.html" %}
{% load i18n %}
{% block head %}
{{ wizard.form.media }}
{% endblock %}
{% block content %}

Experiment

Page: {{ wizard.steps.step1 }} of {{ wizard.steps.count }}

{% csrf_token %}

{{ wizard.management_form }}
{% if wizard.form.forms %}
{{ wizard.form.management_form }}
{% for form in wizard.form.forms %}
{{ form }}
{% endfor %}
{% else %}
{{ wizard.form }}
{% endif %}


{% load staticfiles %}
{% if 'surveyone' in request.path %}
{% if wizard.steps.current in steps %}







{% endif %}
{% if wizard.steps.current in dv_steps %}




$('#submit').click(function() {
var username = $('#hidden').val();

If you need to externalise/compact the $(".someslider").slider() function, I would do it like this:

-
External script 'sliders_setup.js', depending on jQuery:

(function(NAMESPACE){ // to keep things clean
    NAMESPACE.setup_slider = function(selector, value, selector_result){
        $(selector).slider({         
                        animate: true,
                        range: "min",
                        value: value,
                        min: -100,
                        max: +100,
                        step: 1,

                        slide: function(event, ui) { 
                          $(selector_result).html(ui.value);
                          if($(this).attr("id") ==  "one")
                              $("#hidden1").val(ui.value);
                        }
                    });
    };
}
(window.NAMESPACE = window.NAMESPACE || {}));  // again, to keep code clean. Substitute NAMESPACE for any meaningful name you choose.

-
Include jQuery, include sliders_setup.js, call it (inside tags) as:

NAMESPACE.setup_slider('.slider_three', {{ first_slider }}, '#slider-result');

Which brings you to one fairly simple line per slider. Since wizard_form.html knows the value of {{ first_slider }} it will substitute it and the call to the JavaScript function will pass the integer as intended.

StackExchange Code Review Q#68201, answer score: 3