Set the slider thumb height with variable value

Question

I need to set using jquery the height property of range input. I came across a lot of answers that says that it is directly not possible, and you need to do a workaround , here is the link, or this link

CSS :

input[type="range"]::webkit-slider-thumb {
      height : 15px;
}

The workaround proposed is to add another css class with new height for instance :

.newHeight::webkit-slider-thumb {
      height : 45px;
}

and finally you can set the new height by adding (or toggle) the new class :

JQuery :

$('html').addClass('newHeight');

This is working fine, but my problem is that the new height should be variable in my case; I don't have the exact value, it is computed based on other parameters on page load. So is it possible to set in this case the height of the slider-thumb ?

_it is computed based on other parameters on page load_ -- What parameters? — Mr_Perfect, Jun 23 '17 at 10:29
it is actually based on the parent container size, and the parent container is resizable. — Mehdi Souregi, Jun 23 '17 at 10:30
what percentage of height of the parent should the element get? — Mr_Perfect, Jun 23 '17 at 10:31
Based on input height it should change right and you just mentioned `45px` right. Change that to `80%` — Mr_Perfect, Jun 23 '17 at 10:42

Mr_Perfect · Answer 1 · 2017-06-23T11:08:18.833

0

You can set/get the height of an element by using JQuery.height()

Setting height

$('your_selector').height(50);

Getting height

$('your_selector').height();

Get the parent element height of the input range and set the thumb height 80% of it

Here is working plunker

Basically, by changing width of the element you can change the height of the thumb. I just mentioned 5%. In css file of the plunker /* SET HEIGHT */ find that comment. You can change there

edited Jun 23 '17 at 11:08

answered Jun 23 '17 at 10:48

Mr_Perfect

8,254
11
35
62

the range input has height of 0px but the slider thumb no, if you set the height to 80% for instance it will take 80% of 0px so the slider will have height of 0px – Mehdi Souregi Jun 23 '17 at 10:53
I want to set the height of the slider thumb to 80% of the parent of the input range – Mehdi Souregi Jun 23 '17 at 10:57
how can I set the height to 80% of the slider thumb with jquery ? – Mehdi Souregi Jun 23 '17 at 11:04
it is a webkit-slider-thumb, you can not access it with jquery, that's my problem – Mehdi Souregi Jun 23 '17 at 11:05
here is mine https://plnkr.co/edit/d462UvF2FF54V1HHEt6U?p=preview height is set to 150px; if you set height to 80% on the css file, the slider will disappear – Mehdi Souregi Jun 23 '17 at 11:21

Set the slider thumb height with variable value

1 Answers1