Unable to adjust price slider on mobile device, bars are not sliding

I have been utilizing the jQuery slider from lugolabs.com for my website, and while it works flawlessly on desktop, it seems to have issues when viewed on mobile devices.

You can check out the slider at this link:

The library used for this slider is jQuery and jQueryUI. You can also view the code on Codepen at the following URL: http://codepen.io/rajMrPerfect/pen/qRQLoW?editors=0110

.flat-slider.ui-corner-all,
.flat-slider .ui-corner-all {
 border-radius: 0;
 }

 .flat-slider.ui-slider {
   border: 0;
   background: #171616;
   border-radius: 7px;
   }

  .flat-slider.ui-slider-horizontal {
  height: 2px; 
  }

  .flat-slider.ui-slider-vertical {
  height: 15em;
  width: 2px;
   }

  .flat-slider .ui-slider-handle {
   width: 30px;
    height: 30px;
     background: #ebf4e9;
    border-radius: 50%;
    border: none;
    cursor: pointer;
   }

Answer №1

Your code is functioning perfectly on desktop as well as mobile devices!

Answer №2

The issue with angular scroller has been resolved in the codepen link provided above.

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

Stop browsers from automatically filling out fields that are hidden

Our method involves jQuery to conceal irrelevant fields based on previous responses. It's puzzling how the browser (Chrome) has somehow autofilled the user's email address into one of them even though autocomplete is disabled. The field's ID ...

What is the best way to create a "tile-based board" for this game?

I am working on a project to create a board made up of tiles, but I am facing difficulty in filling up the entire board area. Currently, I have only managed to create 1 column of the board, as shown in the image. Can someone guide me on how to fill the ent ...

Vue.js does not seem to be properly assigning attributes that are declared within the data object array

Trying to get a hang of vue.js and looking to create dynamic product cards using it: This is the snippet from my HTML file: <div id="app"> <card v-for="products in product" :productname="product.productname"></card> </div> Here&a ...

Utilizing Next.js for dynamic routing with [[...slug.js]] allows for comprehensive URL handling and seamless 404 page display for links leading back to the homepage - a feature

In order to achieve a single dynamic route for handling all requests in this application, I have created a file called [[...slug]].js. Data loading is managed using getServerSideProps(), allowing for server-side rendering. Notably, there are no index.js fi ...

How to enable seeking functionality for mp3 files with PHP

I have implemented the following PHP script: video tags are unable to extract metadata from it. Any insights on where I might be going wrong and how to rectify this situation? Your guidance would be greatly appreciated. Thank you.</p> ...

Using React JS to automatically execute an event based on a specific state value

Is there a way to initiate an action from a main component when the child component's state reaches a specific value? Let's consider a scenario where I have a Parent component and a Child component, with the parent's state containing active ...

Remove attributes from a collection of objects

Here is an array of objects: let array = [{ firstName: "John", lastName : "Doe", id:5566, weight: 70 },{ firstName: "Francis", lastName : "Max", id:5567, weight: 85 }]; I am looking to remove the properties "lastName" and "weight" for all obj ...

What is the proper way to implement an if-else statement within objects?

Is there a way to convert the code below into an object structure so I can access nodID and xID keys from different files? The issue lies in the if statement within the code. My idea is to use export const testConfig = {} and import testConfig into any fil ...

Troubleshooting problem with updating a record in the MongoDB using Node.js and

Currently, I am developing a REST API using Node, Express, and MongoDB. I have successfully implemented fetch, create, and delete functions but facing issues with the update function. Every time I attempt to test it using Postman, the code hangs, the serve ...

"Utilize JQuery to insert data into the database seamlessly, without the need to refresh the page, allowing for

I am currently using jQuery and PHP to retrieve data from a table and then insert it into a database. However, while the insertion without refreshing the page using jQuery is successful, it ends up inserting the last fetched row multiple times. Here is m ...

Trouble displaying CSS content image in Internet Explorer

Usually, I use Chrome as my default browser. However, I recently decided to test whether my website functions properly on other browsers as well. In Chrome, the header displays my logo with great quality using content:url. But when I tried accessing my w ...

What is the best way to combine an array into a single string and insert it into a textarea with line breaks?

My current goal involves executing the following code with no success: var arr = ['one', 'two','three'] const mydiv = document.createElement('textarea') mydiv.innerText = arr.join('\r\n') docum ...

Retrieving specific data from nested arrays in Vue.js

I am currently working on Vue.js template development and facing an issue with filtering nested data in a faq section. When I try to add a search bar, the nested data array returns all data without proper filtering. Dom <v-container> <v ...

Understanding AngularJS: Exploring Directives and Scope

Below is the code, my expectation is to see parent: true once I click the toggle button Unfortunately, it's not working as expected For reference, here is the link to plunker <body ng-controller="MainCtrl"> <button type="button" ng- ...

I have been experiencing issues with browserify when trying to use both jquery and jquery-ui

I have created a simple test app to showcase an issue I am facing. You can find the demo on this GitHub repository. In this demonstration, the first step was installing jquery and jquery-ui: npm install --save jquery jquery-ui Then I proceeded to creat ...

Troubleshooting a Laravel 5.2 modal popup issue for password recovery, experiencing a 500 internal server error with the Ajax function execution

Is there a way to check if an email exists in order to send a reset password link using an AJAX function? I keep encountering a 500 internal server error before the AJAX runs. I understand that a 500 error is usually due to a token mismatch, but do I actua ...

Using Express Router to call a dynamic route instead of the intended named route

I'm currently developing an API using Express.js, implementing routes and controllers. Within my api.js file, I have the following setup: const app = express() app.use('/clients', clients) Then, in my router/client.js file, I specify the e ...

Is there a way to resolve issues with window.open() on Heroku platform?

I've been working on hosting a webpage on Heroku using Node.js. Instead of using the php method, I opted to go with Node and it's been going smoothly so far. However, I've run into a small issue. Here's what my Procfile looks like: web ...

Acquire key for object generated post push operation (using Angular with Firebase)

I'm running into some difficulties grasping the ins and outs of utilizing Firebase. I crafted a function to upload some data into my firebase database. My main concern is obtaining the Key that is generated after I successfully push the data into the ...

The CSS file stubbornly refuses to connect, opting instead to redirect back to the HTML file

Something strange has occurred. I was working on a React app and everything was functioning properly until today when I returned to it, and my CSS file wasn't linking for some reason. The only actions I took were running npm run build and npm run depl ...