Can't implement Jquery Ui slider for a DecimalField for a model in Django

Question

Just started to fuse JQuery UI with my app. Apparently the slider only works on div elements. I have a form based on a model(ModelForm). One of the fields is a Decimal Field like so:

class mymodel(models.Model):
    rating = models.DecimalField(max_digits = 5, decimal_places = 2)
    ...

being created like so:

class modelCreate(generic.CreateView):
    template_name = 'form.html'
    model = mymodel

form.html:

{% extends "base.html" %}

{% block content %}
{% load staticfiles %}
    <!--<script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js'></script>-->

    <link rel="stylesheet" href="{% static 'Content/css/startTheme/jquery-ui-1.10.4.custom.css' %}" />
    <script src={% static 'Scripts/js/jquery-1.10.2.js' %} ></script>
    <script src={% static 'Scripts/js/jquery-ui-1.10.4.custom.js' %} ></script>

    <div class="form_container">
        <form action="" id="myform" method="post">{% csrf_token %}
            {{ form.non_field_errors }}
            <table>
                <tr class="fieldWrapper">
                    <td class="label">
                        <label for="id_rating">Your number:</label>
                    </td>
                    <td class="field">
                        {{ form.rating }}
                        <div class="error">
                                {{ form.rating.errors }}
                        </div>                            
                    </td>
                </tr>
                <tr>
                    <td colspan="2">            
                        <div class="btnContainer">
                            <input type="submit" class='btn' value="Create" />    
                        </div>         
                    </td>
                </tr>
            </table>           
        </form>
    </div>
{% endblock %}

Using the slider on a normal div that I created works correctly.

But in the form if used on an input element it just changes the color of the border of the input box. It becomes a glorified input box.

Another approach I've thought of is to remove the decimal field on the page, replace with a div, and save that value to the model before commit (throught Form_valid()).

But I'm keeping that solution as a last resort.

A customizable slider is very important for this app. Any help would be appreciated.

Answer 1

The easiest way would be to hide the rating input field and add a <div> for the slider that updates the rating value. I've created a simple demo (below) to demonstrate this idea.

Note: The demo has a max value of 5. However, declaring your field, DecimalField(max_digits=5, decimal_places=2) allows you to store numbers up to 999. This would obviously make it difficult to get the exact number you wanted using a slider.

DEMO

More specifically for your form.html:

...
<td class="field">
    {{ form.rating.as_hidden }}
    <div id="rating_slide"></div>
    <div class="error">
        {{ form.rating.errors }}
    </div>                            
</td>
...

If you want a more integrated method you could create a mixin class for your view or inclusion-tag for your template.