"Utilizing a range input element with a set value on the slider

I have implemented the input type range property on my webpage and have applied some CSS styling to it. However, I feel like there is room for improvement.

.Slider {
  -webkit-appearance: none;
  width: 75%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.Slider:hover {
  opacity: 1;
}

.Slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4BD1A0;
  cursor: pointer;
}

.Slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4BD1A0;
  cursor: pointer;
}
<div class="Slidecontainer" id="Slider"> <span id="Amount"> Amount</span>
    <input type="range" min="5000" max="10000" step="1000" value="5000" class="Slider" id="myRange">
<p>Value: <span id="demo"></span></p>
  </div>

I am looking to display the input value dynamically on the slider handle as I move it. Is this possible? If so, how can I achieve this functionality?

Thanks for your assistance!

javascripthtmlcssinputweb-frontend

Answer №1

Check out this example using a small amount of inline JavaScript. If things start getting more complex, consider moving the script to an external JS file.

.MySlider {
  -webkit-appearance: none;
  width: 75%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.MySlider:hover {
  opacity: 1;
}

.MySlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4BD1A0;
  cursor: pointer;
}

.MySlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4BD1A0;
  cursor: pointer;
}
<form oninput="output.value=myRange.value" class="MySlideContainer" id="CustomSlider">
  <span id="Amount"> Amount</span>
  <input type="range" min="5000" max="10000" step="1000" value="5000" class="MySlider" id="myRange">
<p>Value: <output name="output" for="myRange" id="demo">5000</output></p>
</form>

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

What is the best way to eliminate an object from an array of objects depending on a certain condition?

I have an array of objects structured like so: data = [ { "name":"abc", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9b9899ba9d979b9396d4999597">[email protected]&l ...

javascriptnode.jsarraysobjectforeach

Typing should be positioned on either side of the declaration

When I define the type MyType, it looks like this: export type MyType = { ID: string, Name?: string }; Now, I have the option to declare a variable named myVar using three slightly different syntaxes: By placing MyType next to the variable ...

javascriptnode.jstypescript

Can you explain how this particular web service uses JSON to display slide images?

{ "gallery_images": [ {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433518577.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433519494.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img ...

javascriptjqueryhtmlcssjson

When an if-statement is not executing within the useEffect hook but successfully runs outside of it in NextJs/JavaScript

Trying to shift my if-statement [line 30] located in useFetchMovieGenreResults [inside the hooks folder] from outside my useEffect to inside it seems to be causing issues. Instead of getting the expected output (an object), I encounter an error message. I ...

javascriptreactjsreact-hooksnext.jsuse-effect

What causes the appearance of an HTTP header error and how can we identify the bug?

I tried to convert XML to JSON using two files which are included here. However, I keep encountering an error. Despite searching on SO for solutions, I haven't been able to find the answers. main.js /** SET ENGINE TO PUG */ app.set("views", ...

javascriptnode.jsexpresspug

Modify: "Alter the background color of the parent container for elements that are deemed invalid during

I am currently working on implementing asp.net's built-in validation feature to indicate required fields, but I want to take it a step further by not only displaying a message but also changing the background color of the parent div containing the inv ...

javascriptasp.netvalidation

Having an excessive amount of CSS Sprites or none at all can be detrimental to your website's performance

UPDATE: Attempted to adjust the height to 27px as recommended by kennypu, but still facing issues. I am working with a sprite containing multiple icons that I want to extract for navigation purposes. Unfortunately, I'm struggling to properly display ...

htmlcsssprite

Loading WordPress posts using Ajax

Struggling with getting an Ajax post loader to work properly. Following the jQuery code from a previous StackOverflow post titled "Load More Posts" with Ajax in WordPress, but still facing issues. Trying to implement an isotope list for ajax loading more p ...

javascriptjqueryajaxwordpress

`Can you explain how to specify the elements of an array within a form using AngularJS?`

Below is an array containing objects: //Data source code $scope.data = [ { name: 'Lname', items: [{ label: 'Lastname', type: 'text', model: 'lname', pattern: '/^[a-zA-Z]$/', ...

javascriptangularjsvalidation

Utilize text-to-speech technology to convert the output results into

Looking for a way to live stream a text to speech message triggered by a button press on your website? Unsure how to accomplish this with Node.js and generate the file after the button press? Let's explore some solutions together. ...

javascriptphpnode.jshtml

What is the best way to pass an array to a JavaScript function from a different page?

My website has a static settings page where my JavaScript function uses AJAX to retrieve data from a MySQL table and display it in a table on an HTML document. It's working perfectly, gathering all the necessary data efficiently. Here's the code ...

phpjavascriptjquery

Are your Express routes failing to function properly?

I recently embarked on creating a new Express app by following the tutorial from Code Magazine. Below are my app and the defined route for /img. https://i.sstatic.net/G6PUG.png Upon trying to access http://localhost:3000/img or http://localhost:3000/img/ ...

javascriptnode.jsexpress

Issue with displaying bound value in AngularJS textbox

Hello! I am currently working on an AngularJS application and have encountered a puzzling issue. I am attempting to bind a value to a textbox using the following code: <ul> <li ng-repeat="screen in screenMap"> <input type="text" ...

javascriptangularjs

Django: Utilizing Static Files

I am encountering an issue while attempting to load a static file into my HTML files. The index.html file extends base.html, but the files are not being read (they do not appear on the screen, although there is no "Not Found" error displayed in the termina ...

pythonhtmlcssdjango

Using Higher Order Components in React with TypeScript to pass a component as a prop

Exploring the steps outlined in this guide: https://reacttraining.com/react-router/web/example/auth-workflow. Attempting to replicate the code: const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props = ...

javascriptreactjstypescriptjsx

Issues with authenticating PHP password against MYSQL

I've hit a roadblock while working on my project, and I believe it's a simple fix. However, I just can't seem to figure it out. If you want to see the issue for yourself, check out the live site at www.thriftstoresa.com. The problem lies wi ...

phphtmlmysqlvalidation

Using the Nodejs Array prototype filter method within a JSON object

Attempting to create a function that filters and returns specific strings within JSON data. Any advice is appreciated. Thank you! [ { line: '{"status":"waiting"}' } ] var body_W = []; body_W.push({line: JSON.stringif ...

javascriptnode.jsarraysjson

Tips for synchronizing object updates between parent and child components in React applications

I have a dilemma with my 2 components: The parent component looks like this: @Component({ selector: 'parent', template: ` <child [obj]="obj"> </child> `, styleUrls: [''], }) export class ParentComponent impleme ...

javascriptangulartypescript

The ExpressJS middleware is executing twice

I'm experiencing an issue with the following code snippet. When I include the middleware logger() as the first argument to app.use(), it is called twice. However, when I place it as the second argument, it doesn't get executed at all. Can anyone ...

javascriptnode.jsexpressservermiddleware

The slick slider fails to function properly within a bootstrap dropdown menu

My bootstrap navigation includes a dropdown in which I want to integrate a slick slider. However, all the items get displayed together when the dropdown is opened. The slider functions properly outside of the dropdown and also works when the dropdown has ...

javascripthtmlcssbootstrap-4slick.js