Can't implement Jquery Ui slider for a DecimalField for a model in Django - 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.