CSS Budget Slider With jQuery Range Slide | Price Range Select Slider (2024)

How we can create a price range slider or budget slider using HTML CSS JavaScript? Solution: See this CSS Budget Slider With jQuery Range Slide, Price Range Select Slider.

Previously I have shared price range slider, but this is something different from that because it is stylish and with good UI. Basically, a budget slider helps users set their budget with the help of sliding a range, they don’t have to put numbers manually. This slider contains a minimum and a maximum value you have to choose a number between those two amounts.

Today you will learn to create Price Range Select Slider with good UI design. Basically, there is a range slider with 0 to 1lakh amount range you can choose an amount between that, when you will slide the range slider then you can see the actual amount in the below of slider. You can click any part of the range bar choose change values in one click and also you can slide by holding the handles.

So, Today I am sharing CSS Budget Slider With jQuery Range Slide. There I have used CSS for the styling and jQuery for reading range value and changing the numbers dynamically. And there I have also used jQuery UI, as we know these two are JS library that’s why I am putting this post in the JavaScript category.

If you are thinking now how this budget range slider actually is, then see the preview given below.

Preview Of Price Range Select Slider

See this video preview to getting an idea of how this budget slider looks like.

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

CSS Budget Slider With jQuery Range Slide Source Code

Before sharing source code, let’s talk about it. First using HTML I have created some divs with ID and class names and placed a text input for showing the actual number. I have placed the external files in the HTML file likes jQuery UI CSS, jQuery, and jQuery UI JS CDN files. There are fewer codes of HTML because all features and styles are created using CSS JS.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. I have created the shape by giving width and height values and put the dots up and downsides by placing ‘I‘ as content for after and before conditions. There I have used two google fonts, one of them helps to visualize the I like dots. There I have jQuery UI library (get), that’s why many things are done with just putting on functions and class names.

jQuery here handling the update amount feature. Basically, jQuery fetching the slide movement and updating the values according to slides values. The main functions like handle are powered by jQuery UI, we use libraries for easy work and save times. The numbers are the bottom is a text input that is changing with help of jQuery, you can also put numbers manually because it is a simple input.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put the codes given below.

index.html

XHTML

<!DOCTYPE html>

<head>

<title>Budget Range Slider | Webdevtrick.com</title>

</head>

<body>

<h1>What is your budget?</h1>

</div>

</section>

<scriptsrc="function.js"></script>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put the codes given here.

style.css

CSS

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

@import url(https://fonts.googleapis.com/css?family=Exo:300,800);

* {

margin:0px;

padding:0px;

}

.cube {

position:relative;

width:500px;

height:60px;

margin:5rem auto;

}

.a {

position:absolute;

width:50%;

height:100%;

left:0px;

background-color: #37dd37;

}

.a:before {

content:'';

position:absolute;

top:0px;

left:0px;

width:500px;

height:60px;

}

.a:before {

background-color:rgba(0,0,0,0.05);

}

#slider-range-min {

position:absolute;

width: 94%;

left:3%;

top:27px;

margin: 0px;

z-index:999;

}

.ui-slider {

height:5px;

border:none;

background:rgba(0,0,0,0.1);

-webkit-box-shadow:0px 2px 2px rgba(255,255,255,0.25),

inset 0px 1px 3px rgba(0,0,0,0.3);

-moz-box-shadow: 0px 2px 2px rgba(255,255,255,0.25),

inset 0px 1px 3px rgba(0,0,0,0.3);

box-shadow:0px 2px 2px rgba(255,255,255,0.25),

inset 0px 1px 3px rgba(0,0,0,0.3);

}

.ui-slider:before, .ui-slider:after {

content:'IIIIIIIIIII';

position:absolute;

left:2px;

width:100%;

font-family: 'Source Sans Pro', sans-serif;

font-size:1.2rem;

font-weight:300;

color:rgba(0,0,0,0.3);

letter-spacing:41px;

text-shadow:1px 1px 0px rgba(255,255,255,0.2);

}

.ui-slider:before {

top:-1.4rem;

}

.ui-slider:after {

bottom:-1.4rem;

}

.ui-slider-range {background:transparent;}

.ui-slider .ui-slider-handle {

top:-8px;

width:26px;

height:20px;

margin-left:-15px;

padding-left:4px;

border:none;

background:rgba(255,255,255,0.7);

border-radius:2px;

text-align:center;

font-family: 'Anonymous Pro', sans-serif;

font-size:1.2rem;

line-height:20px;

color:rgba(0,0,0,0.5);

text-decoration:none;

letter-spacing:3px;

cursor:pointer;

text-shadow:1px 1px 2px rgba(255,255,255,1);

-webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.3);

-moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.3);

box-shadow:1px 1px 8px rgba(0,0,0,0.3);

}

.ui-slider .ui-slider-handle:focus {

outline:none;

}

h1 {

font-size:2.7rem;

font-family: exo;

font-weight:200;

color:rgba(0,0,0,0.6);

text-shadow:1px 1px 0px rgba(255,255,255,0.3);

}

#amount {

position:relative;

display:inline-block;

padding-bottom:5rem;

text-align:center;

font-family: 'Exo', sans-serif;

font-weight:800;

font-size:4rem;

color:#37dd37;

background:transparent;

border:none;

}

#amount:focus {outline:none;}

#content {

-webkit-box-sizing:border-box;

-moz-box-sizing: border-box;

box-sizing:border-box;

width:100%;

height:100%;

padding-top:5rem;

text-align:center;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

function.js

JavaScript

// Code By Webdevtrick ( https://webdevtrick.com )

$(function() {

$( "#slider-range-min" ).slider({

range: "min",

value: 50,

min: 0,

max: 100,

slide: function( event, ui ) {

$( "#amount" ).val( "₹" + ui.value + ",000");

$(".a, .b, .c, .d").width(ui.value + "%");

}

});

$(".ui-slider-handle").text("<>");

$( "#amount" ).val( "₹" + $( "#slider-range-min" ).slider( "value") + ",000");

});

That’s It. Now you have successfully created CSS Budget Slider With jQuery Range Slide, Price Range Select Slider Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

CSS Budget Slider With jQuery Range Slide | Price Range Select Slider (2024)

FAQs

How to create a price range slider in jQuery? ›

HTML

<div class="slider-box">
<label for="priceRange">Price Range:</label>
<input type="text" id="priceRange" readonly>
<div id="price-range" class="slider"></div>
</div>

Read On ›

How to get slider value in jQuery? ›

slider("value", number); var a = $( ". selector" ). slider("value", number);

Discover More Details ›

How to create custom range slider in HTML CSS? ›

Example

-webkit-appearance: none; /* Override default CSS styles */ appearance: none; width: 100%; /* Full-width */ ...
-webkit-appearance: none; /* Override default look */ appearance: none; ...
width: 25px; /* Set a specific slider handle width */ height: 25px; /* Slider handle height */

What is sliding in JavaScript? ›

An image slider is a popular component of modern websites that allows the display of multiple images in a single location, usually in a sliding motion. With the use of JavaScript, creating an automatic image slider has become much simpler.

See Details ›

How to create a custom slider in jQuery? ›

We will call our function every time the play button is clicked using jQuery.

We will start or restart the interval using the startSlider function.
Because our slider is currently playing, we will hide the play button using $(this). ...
We will then show our pause button so the user can stop the animation at will: $('.

Feb 8, 2020

Find Out More ›

How to set range slider value in JavaScript? ›

I use an event listener as an example for mouseenter and mouseout as that is easy to show the value being modified.

let range = document. getElementById('rangeElement'); range. ...
let range = document. getElementsByClassName('slider'); let button = document. ...
// input set to a value of '50' in HTML let range = document.

Jun 10, 2020

Tell Me More ›

How do you find the value of a range slider? ›

Input Range value Property

Change the value of a slider control: getElementById("myRange"). value = "75"; Try it Yourself »
Get the value of a slider control: getElementById("myRange"). value; ...
An example that shows the difference between the defaultValue and value property: getElementById("myRange"); var defaultVal = x.

Show Me More ›

How to display selected value in jQuery? ›

Use the jQuery: selected selector in combination with val () method to find the selected option value in a drop-down list.

Explore More ›

How to design a range slider? ›

External JavaScript

The min attribute designates the lowest value allowed in the range. The default value is 0.
The max attribute designates the largest value allowed in the range. The default value is 100.
The value attribute is the default value that's selected when the slider loads.

Apr 3, 2024

How do you implement a range slider? ›

Approach:

First, we create an HTML document that contains an <form> element.
Create an <input> element under the form element.
Use the type attribute with the <input> element.
Set the type attribute to the value “range”.
We can also use the min, max, step, and value attributes to set the restrictions on Range Slider.

Jun 1, 2023

Show Me More ›

How to create slider using CSS only? ›

Approach:

Set up a container with radio inputs (`frame1`, `frame2`) to control slides.
Design slides inside the container with unique frame classes (e.g., `frame_1`, `frame_2`). ...
Use CSS for smooth sliding effects. ...
Implement control buttons and bullets with labels associated with radio inputs.

More items...

Jan 23, 2024

Read The Full Story ›

How to use jQuery slider in HTML? ›

jQuery slideToggle() Method

If the elements have been slid up, slideToggle() will slide them down. $(selector).slideToggle(speed,callback); The optional speed parameter can take the following values: "slow", "fast", milliseconds. The optional callback parameter is a function to be executed after the sliding completes.

See Details ›

How to create a slider using js? ›

Retrieve the images and navigation dots using querySelectorAll() and declare the currentImg and interval variables. Create a function named changeSlide() . Then, use a for loop to set all images' opacity to 0 and remove active from the dots' class list to reset the active slide.

Get More Info Here ›

How to add a slider using js? ›

Here's breakdown:

The entire gallery should be enclosed in a div tag with an id of 'gallery'
All of the images should be enclosed by a div with an id of 'slides'
Each image tag should be enclosed by a div with an id of 'slide'
You must specify the width and height of your images as html attributes in the img tag.

How to create a range slider using js? ›

Creating a Range Slider

Creating a Range Slider.
We can create a Range Slider using simple HTML and JavaScript by following the below steps: Step 1:Creating an HTML element. ...
Step 2:Adding CSS to the slider element.
Step 3:Addition of JavaScript to the slider element. ...
Step 4:Combine the above elements.
Output:

Dec 3, 2018

How to create custom range slider in JavaScript? ›

External JavaScript

For instance, to customize the range slider for the WebKit and Blink-based browsers — like Safari, Chrome, Opera, and Edge — we'll use the ::-webkit-slider-runnable-track pseudo-element to target the slider track and the ::-webkit-slider-thumb pseudo-element to target the thumb.

View Details ›