Adjusting the slider with jQuery and CSS to extend beyond 100% while remaining within the div boundaries

Currently, I'm working on customizing a jQuery slider. My goal is to achieve the same functionality as the jQuery UI slider where you can set a max value like "2500" and the slider will smoothly adjust without going outside of the specified div or screen boundaries.

You can view my current slider implementation here: http://jsfiddle.net/uHNsv/

#slider {
  /* CSS styles for the slider */
}
/* More CSS styles... */

However, my slider doesn't behave like I want it to. It jumps to 100% instead of staying within the designated area. Adjusting the width only makes it extend beyond the screen horizontally.

Is there a way to ensure that the slider stops at the maximum value while remaining inside the filled div?

javascriptjqueryhtmlcss

Answer №1

Are you searching for this?

Check out the jsFiddle Demo

$(function() {
  $('input').on('change', function(){
    var max = $(this).attr("max");

    $(".slider-filled-top, .slider-filled-front").width(
        (this.value * 100 / max) + "%");
  });
});

Answer №2

There are two key points to consider in this situation.

First, the use of this.value + "%" will convert any number input into a percentage. For example, 2400 would become 2400%, which is a significant value.

$(function() {
  $('input').on('change', function(){
    $(".slider-filled-top, .slider-filled-front").width(this.value);
  });
});

Secondly, if you wish to set a higher maximum value, you must also adjust the elements to accommodate that amount.

html

<div id="slider">
  <input type="range" min="0" max="400" value="50">
  <div class="slider-filled-top"></div>
  <div class="slider-filled-front"></div>
</div>

css

#slider {
  width: 400px;
}

http://jsfiddle.net/uHNsv/4/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering the clicking actions on PDF elements within an HTML environment

I am currently working on developing a web application that involves rendering various pdf objects. My main goal is to be able to detect the position of a click inside the pdf container. However, it seems like the OnClick event is not functioning as expe ...

javascriptjqueryhtml

What is the best way to access the URLs of files within a Google Drive folder within a React application?

I've been working on a react app that's relatively straightforward, but I plan to add a gallery feature in the future. To keep things simple for the 'owner' when updating the gallery without implementing a CMS, I decided to experiment ...

javascriptreactjs

Two CSS files are loaded sequentially

Currently, when my HTML page loads, it first displays the styles from the initial CSS file before switching to the second CSS file. This brief moment where the page appears differently than intended is a bit frustrating. Is there a way to prevent this chan ...

htmlcss

Sliding off the canvas - concealed navigation

I have implemented CSS to hide a menu on mobile: #filter-column { position:absolute; left:-400px; } However, I want the menu to slide in from the left when the user clicks a link, and everything else should be hidden. When the layer is closed, th ...

javascriptjqueryhtmlcss

Viewing a PDF within a MUI tooltip

Currently, I am facing an issue where I am attempting to show a preview of a PDF file inside a Material-UI (MUI) Tooltip when a user hovers over a MUI ListItem. While I have successfully displayed previews of PNG and JPG files using Next.js' Image com ...

javascriptreactjspdf

Positioning the div to align perfectly alongside the list items

My current objective involves dynamically creating div elements and populating them with items. A working demo of my progress can be found by following this link. The issue at hand is that the newly created div does not appear in the desired location, but ...

javascriptjqueryhtmlcss

Divide the table row and store each cell using regular expressions

Here is the original source text: gi0/1 1G-Fiber -- -- -- -- Down -- -- Access gi0/2 1G-Fiber -- -- -- -- Down -- -- gi0/3 1G-Fiber -- -- -- -- Down -- -- gi0/4 1G-Fiber -- -- -- -- Down -- -- gi0/5 1G-Fiber -- -- -- -- Down -- -- gi0/0/1 1G-Fiber -- ...

javascriptregex

Create an HTML document that includes data sent via AJAX in the callback function

Currently, I am developing a module that triggers an AJAX request when the user clicks on the download button. Once the call is completed, some data is returned and I need to write this data into an HTML file and automatically save it on the client side. ...

jqueryhtmlajax

Modifying two distinct charts according to the choices made in two independent dropdown menus

In my current project, I am facing a challenge with integrating two separate dropdowns containing UFC fighter names. The goal is to display a plot showing the KD (Knockdown) data for the selected fighters over time when their names are chosen from both dro ...

javascripthtmldrop-down-menudropdown

Verify that the source of an image within a JSON file is blank by utilizing jQuery

I am attempting to retrieve images from Google using the Google Knowledge Graph Search API Link in JavaScript and jQuery. The JSON data returned by Google resembles the example below: { "@context": { "@vocab": "http://schema.org/", "goog": "http ...

jqueryjson

Using Javascript to dynamically add SVGs from an array

Having issues with displaying SVG images in a quiz I'm building. I have a folder full of SVGs that correspond to each multiple choice option, but I can't seem to get the pathway right for them to show up properly. I've tried using template l ...

javascripthtmlarrays

Is it possible to configure Nginx to provide HTTPS on port 10000 and implement Basic Auth for an Express app?

My Linux NodeJS/Express application is designed to serve a text file located at http://example.com/secret.txt. I am looking to restrict access to this file only over HTTPS on port 10000 with Basic Auth security measures in place. It's important to no ...

javascriptnode.jslinuxexpressnginx

Looking for guidance on implementing a straightforward nested for loop in a Node.js environment

I am facing an issue with my code that is meant to generate a 10x10 grid. Since transitioning to Node.js, I am struggling to make it work correctly due to my synchronous thinking pattern. Currently, the Y values are being assigned directly to 10 for all X ...

javascriptnode.jsfor-loop

How to properly format the <address> element on my website to display our company's contact information

While developing a website with asp.net mvc-5, it's important to include our company's contact details like telephone, email, and postal address. That's why I utilized the <address> tag within our "Contact US" page, replacing actual in ...

csshtmldomweb

Encountering an issue with npm installation following a recent node version upgrade

Having trouble installing Sass on Node version v16.14.0. I keep receiving this error message: https://i.stack.imgur.com/6KNcF.png ...

cssnode.jsreactjsnpmsass

Generating an interactive 3D model of a web page embedded within a virtual environment

Exploring the concept of rendering a webpage within a 3D Scene using Three.js has been quite challenging. Most examples I come across seem to render something that is not interactive when clicked on. I've stumbled upon older videos showcasing clickab ...

htmlthree.js

Struggling to Send Data and Generate a Calculated Value with Django

Hello, I am currently in the process of learning Django as a beginner. I have written some code that allows me to input data, but for some reason, I cannot successfully POST it to the database. I'm not quite sure where I've made an error. Model ...

pythonhtmldjangodjango-models

Is there a way to keep the input field data in my form in next js persist even after the page refreshes?

I am currently developing a form in Next.js and I need the data to persist even after the page is refreshed or reloaded. Unfortunately, local storage does not work with Next.js, so I am exploring other alternatives. Every time I try to use local storage, ...

javascriptreactjsformsnext.js

JWPlayer has a built-in delay of 5 seconds before executing an action following the completion of a

I am looking to customize the JWPlayer so that it pauses for 5 seconds before playing the next video. Additionally, I want to display a loading animation at the center of the video similar to what is seen on YouTube. Here is the code snippet I am currently ...

javascriptjqueryjwplayer

HTML content does not reload when using AJAX

I have been experimenting with this code to show text and then fade it out: $('#submit_new_player_order').click(function(e){ //some data to define data_to_send $.post(ajaxurl, data_to_send, function() { alert('it is in here') ...

jqueryajax