Creating a jQuery Django Slider Widget Tutorial

Creating a jQuery Django Slider Widget Tutorial

Django Slider Widget - Title
Complete Tutorial - 6 Minutes

Why use a jQuery Django Slider Widget?

The jQuery Django Slider Widget is a unique way to begin dealing with user inputs. Especially whenever those user inputs can be a range of values that the user is requesting. Yeah, you could just have text input blanks with numerical input values. But a slider allows a much better user experience on your site. 

I’ve already briefly stated how well sliders work for range values – but that’s one of their main purposes. Take for example a variety of things that can be entered for ranged values. Prices on hotels, date ranges, number of rooms available, salary ranges, etc. 

Learning how to use jQuery django slider widgets on your website is a must!

jQuery Django Slider Widget - Example
Example of jQuery Django Slider Widget

See an Example of a jQuery Django Slider Widget

With all my widget tutorials, I think it’s important to know what you’re building before you spend your time creating it on your website. The above shows an example of the widget we’ll be creating in this tutorial. It’s just a screenshot, but if you want to see and use the working example of this widget, you can find it on my Heroku hosted Django website. You can find it at this link.

How to start with jQuery Widgets

jQuery is just a tool to make it easier to impliment Javascript into your django websites (or any type of website that supports Javascript for that matter). 

If you want to use Javascript to begin creating dynami content on your website, jQuery makes the process much easier to get started.

Source Code for jQuery Django Widgets - Transition slide
First, we need the source code for the jQuery Django Slider Widget

To get the source code for the slider widget, we’ll need to head to jQuery’s website. You can either google search it or just follow this link. Or you can just grab the source code from below.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
These two are just the styling jQuery uses by default.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );
</script>
Like always, the two first scrips are the ones which include all the widgets. Then the third script is setting up the functionality of the slider widget. 
 
The slider is a bit like the django progressbar widget in the fact that most of the ‘work’ is done in the jQuery scripts rather than on the front side of HTML. 
 
Let’s dive into how to work with the script to get your desired results. 
Using the Slider JavaScript to create a Django Slider Widget

Depending on the size of your project, I would most likely encourage you to create a base.html file and extend it to other templates in your Django project. This is how I’ve created the working live example website for all the tutorials on jQuery widgets.

In this scenario, play the above styling and scripts into your base.html file. If you’re only working off one file, then go ahead and place it into that file. 

To start using the jQuery Django Slider Widget, you’ll need to begin determining the range of values that you expect your user to pass to you. Change this range accordingly in your Javascript:

range: true,
min: 10000,
max: 50000,
This range would denote a range of 10,000 to 50,000.
 
You then can decide how you want the increment to change with the user’s movement of the slider bar. I wanted the user to have complete control of these numbers, so I left my script at ‘1’ increments. 

I only changed jQuery’s source code slightly for this example. Remember you can always view the live example at the Heroku hosted Django web app found here.

{% extends “base.html” %}
{% load staticfiles %}

{% block content %}
<script>
$( function() {
$( “#slider-range” ).slider({
range: true,
min: 60000,
max: 150000,
values: [ 1000, 3000 ],
slide: function( event, ui ) {
$( “#amount” ).val( “$” + ui.values[ 0 ] + ” – $” + ui.values[ 1 ] );
}
});
$( “#amount” ).val( “$” + $( “#slider-range” ).slider( “values”, 0 ) +
” – $” + $( “#slider-range” ).slider( “values”, 1 ) );
} );
</script>
</head>
<body>

<p>
<label for=”amount”>Desired Salary</label>
<input type=”text” id=”amount” readonly style=”border:0; color:#f6931f; font-weight:bold;”>
</p>

<div id=”slider-range”></div>


</body>
</html>


{% endblock %}

That’s pretty much it whenever it comes to creating your own jQuery Django Slider Widget in your Django project. If this was your first jQuery tutorial, I totally recommend checking out some of my other tutorials. There’s some awesome widgets that you can create with simple jQuery applications. 

Additionally, jQuery is a great stepping stone to learning full JavaScript. One of the most profitable and useful coding languages to learn. 

Enjoy this content? Sign up for the newsletter!
Other jQuery Django Widget Tutorials:

One thought on “Creating a jQuery Django Slider Widget Tutorial

  1. Michael Colacino

    This is very helpful. Could you also explain how to take an existing Django form and add a slider to it? What needs to be in models.py, fields.py, forms.py to create a slider that will render along with other html elements defined and the value written to the db? Any help would be appreciated. TIA

Leave a Reply

Your email address will not be published. Required fields are marked *