Is it possible to create a custom marker on an HTML5 range input element?
I'm looking for a way to change the design of the circle marker as it moves along the scale from 1 to 10. Specifically, I want to change the color of the marker based on its position/value. Do you have any suggestions on how to achieve this?
<label for=weight>Party Scale</label>
<input type=range id=weight min=0 value=0 max=10 step=1>Thank you,
Lewis
Why limit yourself to HTML5 ranges when there are better options available? Consider using a plugin like noUiSlider. It provides a wider range of customization options to help you achieve your desired outcome.
Check out this example I created using noUiSlider:
https://i.stack.imgur.com/dEysG.gif
JS
var rangeSlider = document.getElementById('weight');
noUiSlider.create(rangeSlider, {
start: [ 0 ],
range: {
'min': [ 1 ],
'max': [ 10 ]
}
});
rangeSlider.noUiSlider.on('slide', function(values, handle){
var v = values[handle],
s = v * 10,
l = 50;
$(rangeSlider).find('.noUi-handle').css({"background-color":"hsl(10," + s + "%," + l +"%)"})
});
If you want to customize the appearance, consider adding this CSS:
-webkit-appearance: none;
Next, try changing the background color like so:
background-color: #3498db;
For a visual example, check out this demo: https://jsfiddle.net/9obqtLuk/
To begin, the first step is to reset the appearance of the input range specifically for webkit and gecko based browsers:
#myRange {
-webkit-appearance: none;
}
#myRange::-moz-range-thumb{
-moz-appearance: none;
}
#myRange::-webkit-slider-thumb {
-webkit-appearance: none;
}
It's important to add additional rules since the appearance of the element is no longer defined (refer to the fiddle below).
Next, listen for cursor movements using the input event, and dynamically create a CSS rule in a style sheet:
$("#myRange").on("input", function (evt) {
if (evt.target.value > 50)
var rule= "background:red";
else
var rule= "yellow"
sheet.textContent =
"#myRange::-webkit-slider-thumb{ "+rule+" } " +
"#myRange::-ms-thumb{ "+rule+" } " +
"#myRange::-moz-range-thumb{ "+rule+" } ";
})
https://jsfiddle.net/rv9xqwq6/8/
Here are some useful resources:
In the process of building my React App (although the specific technology is not crucial to this discussion), I have encountered a situation involving three asynchronous functions, which I will refer to as func1, func2, and func3. Here is a general outline ...
Recently, I obtained an HTML website template that I am currently working on customizing. One of the tasks I have been tackling is replacing some of the existing images with my own. After resizing the new images to match the dimensions of the originals, ...
I am looking to implement a text field with typeahead functionality. Essentially, I have a collection of words and as you start typing in the field, suggestions should appear based on the input. The challenge is that it should be capable of providing sugge ...
I'm struggling with creating spacing between my navigation links, specifically wanting to add space between each link that is bordered with a black border. I've looked online for solutions but all I find are ways to reduce space instead of adding ...
I am in the process of learning html and Bootstrap for CSS. Below is the code I currently have: <div class="container"> <div class="row text-center mb-4 mt-2"> <div class="col-md-12"> <div cla ...
<input class="form-control validation-field ng-dirty ng-touched ng-invalid" placeholder="Password" type="password"> Despite using the element to retrieve it, I am unable to send keys and no error message is displayed. This issue persists in both Fir ...
Currently, I have an HTML5 banner designed using Flash CC. However, the platform in which I am showcasing this ad does not support JSON files. I am looking for a way to transfer the information from the JSON file into either my .html or .js file so that ...
My requirement is to check the text content of a box. If it matches any value stored in an ARRAY, then I have to execute a specific action. var ARRAY1 = ["Saab", "Volvo", "BMW"]; if (select[i].innerHTML.indexOf('ARRAY1') != -1){//code here} ...
While delving into the world of Three.js framework and in search of an efficient JavaScript inheritance pattern, I decided to explore how it was implemented in Three.js itself. After studying it closely, I have gained a solid understanding of most aspects, ...
I'm currently developing a commenting feature for a blog using the latest version of NextJs. The text input collects data and sends it to the 'Vercel' hosted database. I am able to successfully fetch the data from the frontend as expected. ...
I am encountering an issue with my cloud function in which it makes an http POST request to the LinkedIn API for retrieving an access token. The main problem is that I am unable to retrieve the `body` of the response as it always turns out to be `undefined ...
I have a basic table that only includes an ID and country field. I am attempting to modify/update country data using a Bootstrap modal. I have successfully linked the data to the modal like this: Button: <a class="btn btn-sm btn-info" data-to ...
I attempted to install Next.js on my computer and followed the documentation provided to set up a Next.js project. You can find the documentation here. The steps I took were: Ran 'npx create-next-app@latest' Was prompted for the name of my proj ...
In the past, we had placed ng-app on the body tag which led to problems with dependency injection when multiple modules were being used on the same webpage. This required module creators to be aware of the existing app and inject their app into it. We are ...
During the development of an Angular 2 app involving multiple calculation services, I encountered some interesting questions: Is it beneficial to use static in an Angular service provided on the application level? Or is it unnecessary? How does a static ...
I have a task where I need to retrieve data from two different API endpoints. Once both sets of data are fetched, I need to compare the information obtained from each source. I am familiar with fetching data from a single API endpoint and using a callback ...
Currently, I am in the process of working on a dynamic dropdown menu that involves select boxes. These values are being pulled directly from a MySQL database (if you're interested, here is how I set up the database). I have successfully retrieved and ...
Currently, I am working on a WordPress query for a custom post type and would like to implement a "load more" button using Ajax to allow users to load additional articles. To handle the scenario where there are no more posts to load, I have included an "el ...
I am looking to create a responsive box that automatically adjusts its height when the window width is resized. I have tried using Transform:Translate() to move the picture inside, but so far, the height only changes when I manually adjust the height of ...
link REL="SHORTCUT ICON" HREF="/images/greenTheme/favicon.ico" type="image/x-icon" While this code functions properly in Firefox, it appears to be causing issues in Internet Explorer. Can anyone provide guidance on how to resolve the compatibility issue w ...