Creating a series of tiny vertical markings along the horizontal line using the input range

I have a range input and I am looking to add small vertical lines at intervals of 10 on the horizontal line representing each default step.

The range of my input is from 0 to 40 and I would like to have small vertical lines at 10, 20, and 30. I need to achieve this without using jQuery or any external library due to restrictions in the framework I am using.

<input id="myRange" step="10" name="foo" type="range" min="0" max="40" value="{!v.resourseHours}" class="slider" onchange="{!c.resourseInput}" />

I am aiming for something similar to the image at the bottom, with the numbers 10, 20, and 30 displayed on top of each line.

https://i.sstatic.net/tsx09.png

javascripthtmlcssinputsalesforce-lightning

Answer №1

To achieve that desired effect, it is recommended to utilize an overlay or underlay.

.slider-wrapper {
  position: relative;
  width: 150px;
}

.slider {
  width: 150px;
  margin: 0;
  padding: 0;
}

.underlay {
  position: absolute;
  height: 10px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  display: flex;
}

.breakpoint {
  width: Calc(100%/4);
}

.breakpoint:not(:first-child) {
  border-left: 1px solid green;
}
<div class="slider-wrapper">
  <div class="underlay">
    <div class="breakpoint"></div>
    <div class="breakpoint"></div>
    <div class="breakpoint"></div>
    <div class="breakpoint"></div>
  </div>
  <input id="myRange" step="1" name="foo" type="range" min="0" max="40" class="slider" />
</div>

Answer №2

Utilize the list attribute to reference a datalist. Each option within the datalist showcases a marker.

<input type="range" list="markers" max="10" step="2">
<datalist id="markers">
  <option value="0"></option>
  <option value="2"></option>
  <option value="4"></option>
  <option value="6"></option>
  <option value="8"></option>
  <option value="10"></option>
</datalist>

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

Direct AngularJS to automatically reroute users from the login page to the welcome page

I am currently developing a web application where I need to redirect from the login page to the welcome page once the user id and password have been validated. <script> var app = angular.module('myApp', []); app.controller(&apo ...

javascriptangularjsasp.net-mvc-5

npm installs a multitude of dependencies

Recently, I purchased an HTML template that includes various plugins stored in a directory named bower_components, along with a package.js file. While trying to add a new package that caught my interest, I opted to utilize npm for the task. Upon entering ...

javascriptcssnode.jsnpmpackage

Ensure to use e.preventDefault() method when handling form submissions

Check out this code snippet: <form> <input type="text" name="keyword" value="keyword"> <input type="submit" value="Search"> </form> I'm seeking assistance with implementing jQuery to prevent the default action of the submit b ...

javascriptjquery

Passport is implementing multistrategies for multiple authentications simultaneously

After configuring Passport.js to utilize multiple strategies, I encountered an issue: passport.authenticate(['bearer', 'facebook-token', 'google-token', 'linkedin-token'],function(err, user, info) ... Although it i ...

javascriptnode.jsexpresspassport.js

What is the best way to find the most commonly used category for a product in a MongoDB collection?

I've been diving into MongoDB and encountered a challenge with my current task. I'm trying to figure out how to determine the most frequently used category in a collection. According to this JSON, the most used category is CIES. My goal is to dis ...

javascriptreactjsmongodbmongoose

Swap the text within the curly braces with the div element containing the specified text

I have an input and a textarea. Using Vue, I am currently setting the textarea's text to match what's in the input field. However, now I want to be able to change the color of specific text by typing something like {#123123}text{/#}. At this poin ...

javascripthtmlcssvue.js

Creating an error message display function using HTML and JavaScript when incorrect input is detected

I am having trouble creating an HTML5 and JS program that will show an error message if the user input is empty. Despite my efforts, I can't seem to get the "Error Message" to display. As a beginner, the video tutorial I'm following doesn't ...

javascripthtml

Nested function and the process of breaking out of the parent function

Is it possible to exit out of the main/parent function when I am in a function that was called from inside another function? For example: function(firstFunction(){ //stuff secondFunction() // code continuation if second function doesn't ...

javascriptjquery

Having trouble getting the overflow scrollbar to work properly?

I recently created a Whiteboard using Vue. The Whiteboard consists of an SVG element where I can add other SVG elements like paths to it. In order to enable scrolling within the SVG, I came across this example which seemed quite helpful. Check out the exa ...

htmlcssvue.jssvg

Chrome now supports clickable circular canvas corners

I have a unique setup with two canvases. I've customized them to be circular by utilizing the border-radius property. The second canvas is positioned perfectly within the boundaries of the first one using absolute positioning. This is where it gets e ...

javascripthtml5-canvascssclickable

My tests are not passing because I included a compare method in the Array prototype. What steps can I take to fix this issue in either the

Embarking on the challenging Mars Rover Kata has presented a unique problem for me. My jasmine tests are failing because of my array compare method within the prototype. This method is crucial for detecting obstacles at specific grid points. For instance, ...

javascriptarraysjasmine

Learn how to dynamically incorporate multiple Bootstrap collapse elements in PHP

I've encountered an issue with my code that contains both HTML and PHP. The problem arises when there are multiple elements in a collapse, as only the first element works properly. This is due to the fact that each element has the same id named "colla ...

javascriptphpcsstwitter-bootstrap

How can the outcome of the useQuery be integrated with the defaultValues in the useForm function?

Hey there amazing developers! I need some help with a query. When using useQuery, the imported values can be undefined which makes it tricky to apply them as defaultValues. Does anyone have a good solution for this? Maybe something like this would work. ...

javascriptreactjstypescriptreact-hook-formreact-query

List of nested objects converted into a flat array of objects

Looking to transform a data structure from an array of objects containing objects to an objects in array setup using JavaScript/Typescript. Input: [ { "a": "Content A", "b": { "1": "Content ...

javascriptarraystypescriptjavascript-objects

Looking for a bootstrap table code that includes checkboxes and a save button, so that when the save button is clicked, it

Seeking a Bootstrap table code that includes row checkboxes. When the save button is clicked, it should return the selected checkbox rows. ...

javascriptuser-interfacebootstrap-4datatable

Simultaneously scrolling left and fading in with jQuery

I've come across this code that works well in scrolling my divs to the left. However, I'm looking to add a fading effect while they are scrolling. Is there a way to achieve this? $('div#line1').delay(1000).show("slide", { direction: "r ...

jquerycssjquery-ui

Error: The value property is undefined and cannot be read at the HTMLButtonElement

I'm currently working on a project where I need to display a dropdown menu of buttons using Pug in order to render an HTML page. To achieve this, I am using the getElementsByClassName('dropdown-item') method to retrieve all the buttons in an ...

javascripthtmlnode.jsexpresspug

Perform a jQuery AJAX GET request while passing the current session information

Is it possible to retrieve the HTML content of another webpage using jQuery, particularly when that page is already signed in? In simpler terms, can we use $.get() to fetch a different page on the same website and transfer the PHP/Javascript cookies with ...

phpjavascriptjqueryget

Is it possible to utilize jQuery's .wrap or .wrapInner to encase a variety of elements within them?

I am working with a HTML structure that looks like this: <section> <item> <ele class="blue" /> <ele class="green" /> <ele class="red" /> </item> <item> <ele class="blue" /> <ele ...

javascriptjquery

Adjust the element's height as you scroll

I am currently experimenting with a method to dynamically increase the height of an element based on user scrolling behavior. Despite trying multiple approaches, I have encountered challenges in getting it to work effectively. The concept is as follows: ...

javascriptjquerycssscrollgaussianblur