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:
Having recently delved into the world of JavaScript and jQuery, I'm encountering some issues that I can't seem to resolve. My gut feeling is that the problem lies in the reference to the jQuery files not working properly, but I could be mistaken. ...
Currently, I have developed a basic live search feature using jQuery ajax to search through a JSON file on the server and display a list of events. The script is programmed to show a list of events that were previously displayed on the page if the search ...
While following the Next.js documentation, I attempted to retrieve data from a local server but encountered an error message: FetchError: invalid json response body at http://localhost:3000/agency/all reason: Unexpected token < in JSON at position 0 ...
One thing I have noticed is that everything seems to be working fine up until the point where I try to load it through fancybox via AJAX. An example of it working statically: <iframe id="videourl1" width="640" height="340" src="" frameBorder="0">& ...
Upon logging in, the system should verify the admin type and redirect them to a specific component. For example, an HOD should access the admi dashboard, CICT should access admin2 dashboard, etc. Below is my mongoose schema: const mongoose = require(&apo ...
No matter how many times I review my code, I find myself perplexed. Despite my efforts to create a custom library of functions from scratch (shoutout to stackoverflow for guiding me on that), the results are leaving me puzzled. A javascript file is suppose ...
let formData = new FormData(); payloadData = JSON.stringify(payload.unitDoctors); for (var prop in payloadData) { formData.append(prop, payloadData[prop]); } axios({ method: "put", url: apiUrl + payload.id, data: formData }) .then(resp ...
I have developed an HTML/CSS code inspired by the Mac/Apple calculator design. It features buttons organized in 5 rows using flexbox. You can view my code on this codepen: <div class="wrapper"> <div class="calheader"> ...
I need to execute a series of APIs in a loop, but I want the second loop to start only after receiving the result from the last API call in the first loop. How can I achieve this? for(var i=0; i<array.length; i++ ) service.getfunction(array[i]).t ...
Dealing with a small form here. I want to validate the input both when it changes and when submitted. Specifically, I'm checking that the input number is greater than a certain minimum value. If it's below the minimum, it should be automatically ...
https://jsfiddle.net/2xwo87bs/ In order for Vue to properly handle the object prop that is being passed to the component, it is necessary to first convert the string into an actual object. While in the provided snippet I have used JSON.parse() as a qui ...
Is there a way to create a clickable textField that opens a dialog box for users to input more text? I'm specifically looking for a solution using MaterialUI. Currently, I have a workaround where a button is displayed to open the dialog box instead o ...
Is there a way to convert a base64 string image to a blob image in order to send it to the backend using a form? I've tried some solutions like this one, but they didn't work for me. function b64toBlob(b64Data, contentType='', sliceSiz ...
Thank you all for your assistance, it has been incredibly helpful. I am new to yii and feeling a bit overwhelmed at the moment. I have created a jQuery script to validate a form and then send it to my controller to process and save in the database. Howev ...
I oversee the management of numerous ads on a website. My goal is to enhance their accessibility, and though I have been doing research, there seems to be limited information available on how to achieve this effectively. While I continue my investigation, ...
I am attempting to integrate angular datatables from this source, but encountering the following error ionic datatable error snippet <head> <script src="js/controllers.js"></script> <script src="js/services.js"></script> ...
Is there a way to obtain global access to the current URL ID params? I am facing difficulty accessing the current URL ID in a child component within React. The ID is essential for querying a MongoDB database in my ChecklistTool component. Typically, I wou ...
Could someone please assist me in understanding why we use angular brackets <> in typescript? For example, I have provided some code below and would appreciate an explanation. export class HomePage { constructor(public navCtrl: NavController) { ...
Can anyone help me understand how I can use angularfire2 to check the accessibility of the cloud firestore database and retrieve collection values? If accessing the cloud database fails, I want to be able to retrieve local data instead. This is an exampl ...
I have been attempting to incorporate collapsible panels within an ngRepeat loop. Below is the code I have been using: <div class="panel panel-default" ng-repeat="element in elements"> <div class="panel-heading"> ...