Develop Reference

how to get a pointer pointing at centre of slider thumb? CSS and Jquery

I have a feature to show the price range and the most repeated price (Mode). What i did is i used the range input type and deactivated it (so it can't be moved by user as it's only for illustration).
Below is my HTML, CSS and JS which i guess will explain better my issue
<div class="range">
<div class="sliderValue">
<span class="show" style="left: ${pinPostion}%;">${mostCommonMaxPrice}</span>
</div>
<div class="field">
<div class="value left">${lowestMinPrice}</div>
<input type="range" min="${lowestMinPrice}" max="${highestMaxPrice}" value="${mostCommonMaxPrice}" disabled>
<div class="value right">${highestMaxPrice}</div>
</div>
</div>
.range{
height: 40px;
width: 130px;
background: #fff;
border-radius: 10px;
padding: 0 32.5px 0 22.5px;
}
.field{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.field .value{
position: absolute;
font-size: 12px;
color: #4638D2;
font-weight: 600;
}
.field .value.left{
left: -15px;
}
.field .value.right{
right: -21.5px;
}
.range input{
-webkit-appearance: none;
width: 100%;
height: 3px;
background: #ddd;
border-radius: 5px;
outline: none;
border: none;
z-index: 2222;
}
.range input::-webkit-slider-thumb{
-webkit-appearance: none;
width: 10px;
height: 10px;
background: #4638D2 !important;
border-radius: 50%;
background: #4638D2;
border: 1px solid #4638D2;
}
.range input::-moz-range-progress{
background: #4638D2;
}
.sliderValue{
position: relative;
width: 100%;
align-items: center;
}
.sliderValue span{
font-size: 8px;
position: absolute;
height: 22.5px;
width: 22.5px;
/*transform: translateX(-70%) scale(0);*/
font-weight: 600;
top: -15px;
line-height: 27.5px;
z-index: 2;
color: #fff;
text-align: center;
}
.sliderValue span.show{
transform: translateX(-70%) scale(1.3);
}
.sliderValue span:after{
position: absolute;
content: '';
height: 100%;
width: 100%;
background: #4638D2;
border: 3px solid #fff;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom-left-radius: 50%;
box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
const pinPostion = (((mostCommonMaxPrice - lowestMinPrice)/(highestMaxPrice - lowestMinPrice)) * 100) + lowestMinPrice;
As you see in the picture am not able to get the bubble that shows the mode number to point at the slider thumb position, it is only showing well when it's 100 but if it's more or less then it goes off position, I tried to calculate the percentage and pass it as a variable but it's still coming off, am not sure if my CSS is wrong or is it the equation am using or am I doing all this altogether wrong and there is an easier way to do it. I really appreciate your help. And would be grateful if you up the question, please :)

I found some code example here, it uses similar to yours approach with manual position calculation for Value Bubble, try it:
const allRanges = document.querySelectorAll(".range-wrap");
allRanges.forEach(wrap => {
const range = wrap.querySelector(".range");
const bubble = wrap.querySelector(".bubble");
range.addEventListener("input", () => {
setBubble(range, bubble);
});
setBubble(range, bubble);
});
function setBubble(range, bubble) {
const val = range.value;
const min = range.min ? range.min : 0;
const max = range.max ? range.max : 100;
const newVal = Number(((val - min) * 100) / (max - min));
bubble.innerHTML = val;
// Sorta magic numbers based on size of the native UI thumb
bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
}
.range-wrap {
position: relative;
margin: 0 auto 3rem;
}
.range {
width: 100%;
}
.bubble {
background: red;
color: white;
padding: 4px 12px;
position: absolute;
border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
.bubble::after {
content: "";
position: absolute;
width: 2px;
height: 2px;
background: red;
top: -1px;
left: 50%;
}
body {
margin: 2rem;
}
<div class="range-wrap">
<input type="range" class="range">
<output class="bubble"></output>
</div>
<div class="range-wrap">
<input type="range" class="range" min="20" max="940">
<output class="bubble"></output>
</div>
<div class="range-wrap" style="width: 75%;">
<input type="range" class="range" min="50" max="60" step="2">
<output class="bubble"></output>
</div>
<div class="range-wrap" style="width: 55%;">
<input type="range" class="range" min="-20" max="20">
<output class="bubble"></output>
</div>
I found it here https://css-tricks.com/value-bubbles-for-range-inputs/

I think the pinpoint position does not consider the border width of the pinpoint itself, therefore it is not aligned to its center of the tip.
Consider this example, the pinpoint should be right at the middle:
variable
value
lowestMinPrice
0
highestMaxPrice
100
mostCommonMaxPrice
50
const pinPostion = (((mostCommonMaxPrice - lowestMinPrice)/(highestMaxPrice - lowestMinPrice)) * 100) + lowestMinPrice;
pinPostion = (((50 - 0)/(100 - 0)) * 100) + 0;
pinPostion = 50
The pinpoint is made from a rotated element with border radius. If I take the radius off, this is how it looks
If I further take the transform off, this is how it looks
Even I port the number to your example, the pinpoint is off a little bit.
.range {
height: 40px;
width: 130px;
background: #fff;
border-radius: 10px;
padding: 0 32.5px 0 22.5px;
}
.field {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.field .value {
position: absolute;
font-size: 12px;
color: #4638D2;
font-weight: 600;
}
.field .value.left {
left: -15px;
}
.field .value.right {
right: -21.5px;
}
.range input {
-webkit-appearance: none;
width: 100%;
height: 3px;
background: #ddd;
border-radius: 5px;
outline: none;
border: none;
z-index: 2222;
}
.range input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10px;
height: 10px;
background: #4638D2 !important;
border-radius: 50%;
background: #4638D2;
border: 1px solid #4638D2;
}
.range input::-moz-range-progress {
background: #4638D2;
}
.sliderValue {
position: relative;
width: 100%;
align-items: center;
}
.sliderValue span {
font-size: 8px;
position: absolute;
height: 22.5px;
width: 22.5px;
/*transform: translateX(-70%) scale(0);*/
font-weight: 600;
top: -15px;
line-height: 27.5px;
z-index: 2;
color: #fff;
text-align: center;
}
.sliderValue span.show {
transform: translateX(-70%) scale(1.3);
}
.sliderValue span:after {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: #4638D2;
border: 3px solid #fff;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom-left-radius: 50%;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div class="range">
<div class="sliderValue">
<span class="show" style="left: 50%;">50</span>
</div>
<div class="field">
<div class="value left">0</div>
<input type="range" min="0" max="100" value="50" disabled>
<div class="value right">100</div>
</div>
</div>

How to detect autocomplete list mouseover and hide the palceholder span

I have a span instead of plaseholder, When I mouse over on the items in the autofill list, I want to also hide the span.placeholder at the sametime such as default placeholder.
form {
margin: 0 auto;
width: 100%;
text-align: center;
}
form input {
position: absolute;
font-size: 16px;
height: 100%;
display: block;
background: transparent;
border: none;
margin: 0;
outline: none;
width: calc(100% - 10px);
top: 0;
left: 0;
padding: 0px 5px;
}
div.inputs_div {
position: relative;
width: 200px;
height: 22px;
display: block;
background: #fff;
padding: 5px 5px;
border: 1px solid black;
}
span.placeholder {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
display: block;
font-size: 16px;
pointer-events: none;
}
<form>
<div class="inputs_div">
<input type="text" name="username" />
<span class="placeholder">User Name</span>
</div>
</form>

You can use input and check if input is empty or not , if yes than remove text else show text
Here used display property you can use according to preferences like visibility , color: white
It will be direct answer if you provided the autocomplete code but you can use input focus to trigger and check if input is filled or not
function toogleText() {
var text = document.getElementById("placeholder1");
var inputDemo = document.getElementById("inputDemo").value;
if (inputDemo != "") {
text.style.display = "none";
} else {
text.style.display = "block";
}
}
document.getElementById("inputDemo").addEventListener("input", toogleText)
form {
margin: 0 auto;
width: 100%;
text-align: center;
}
form input {
position: absolute;
font-size: 16px;
height: 100%;
display: block;
background: transparent;
border: none;
margin: 0;
outline: none;
width: calc(100% - 10px);
top: 0;
left: 0;
padding: 0px 5px;
}
div.inputs_div {
position: relative;
width: 200px;
height: 22px;
display: block;
background: #fff;
padding: 5px 5px;
border: 1px solid black;
}
span.placeholder {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
display: block;
font-size: 16px;
pointer-events: none;
}
<form>
<div class="inputs_div">
<input type="text" name="username" id="inputDemo" />
<span class="placeholder" id="placeholder1">User Name</span>
</div>
</form>

RangeSlider using combination of HTML, CSS and JS not working in Squarespace

I have a code for a dynamic range slider which works on other sites but not on Squarespace. I am using the theme, Merida and the page can be found here. The code is meant to show the values in a teardrop shaped bubble which moves with the slider.
the full code is below, just incase i am wrong and it isn't the javascript that is faulty. Any help will be greatly appreciated. Thanks!
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #664AFF;
}
.range{
height: 80px;
width: 380px;
background: #fff;
border-radius: 10px;
padding: 0 65px 0 45px;
box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
}
.sliderValue{
position: relative;
width: 100%;
}
.sliderValue span{
position: absolute;
height: 45px;
width: 45px;
transform: translateX(-70%) scale(0);
font-weight: 500;
top: -40px;
line-height: 55px;
z-index: 2;
color: #fff;
transform-origin: bottom;
transition: transform 0.3s ease-in-out;
}
.sliderValue span.show{
transform: translateX(-70%) scale(1);
}
.sliderValue span:after{
position: absolute;
content: '';
height: 100%;
width: 100%;
background: #664AFF;
border: 3px solid #fff;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom-left-radius: 50%;
box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.field{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.field .value{
position: absolute;
font-size: 18px;
color: #664AFF;
font-weight: 600;
}
.field .value.left{
left: -22px;
}
.field .value.right{
right: -43px;
}
.range input{
-webkit-appearance: none;
width: 100%;
height: 3px;
background: #ddd;
border-radius: 5px;
outline: none;
border: none;
z-index: 2222;
}
.range input::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: #664AFF;
border: 1px solid #664AFF;
cursor: pointer;
}
.range input::-moz-range-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: #664AFF;
border: 1px solid #664AFF;
cursor: pointer;
}
.range input::-moz-range-progress{
background: #664AFF;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="range">
<div class="sliderValue">
<span>100</span>
</div>
<div class="field">
<div class="value left">
0</div>
<input type="range" min="10" max="200" value="100" steps="1">
<div class="value right">
200</div>
</div>
</div>
<script>
const slideValue = document.querySelector("span");
const inputSlider = document.querySelector("input");
inputSlider.oninput = (()=>{
let value = inputSlider.value;
slideValue.textContent = value;
slideValue.style.left = (value/2) + "%";
slideValue.classList.add("show");
});
inputSlider.onblur = (()=>{
slideValue.classList.remove("show");
});
</script>
</body>
</html>

I make a side pull-down menu. Does not work

I make a side pull-down menu. Does not work. Please tell me what the problem is
The menu does not open and does not display any errors. I have already tried everything that I could and zero result.
function left_menu(selector){
let menu = $(selector);
let button = menu.find('.left_menu_button');
let links = menu.find('.left_menu_link');
let overlay = menu.find('.left_menu_close_container');
button.on('click', (e) => {
e.preventDefault();
loggleMenu();
});
links.on('click', () => loggleMenu());
overlay.on('click', () => loggleMenu());
function loggleMenu(){
menu.toggleClass('left_menu_main_div_active');
if(menu.hasClass('left_menu_main_div_active')){
$('body').css('overflow', 'hidden');
}else{
$('body').css('overflow', 'visible');
}
}
}
left_menu('.left_menu_main_div');
.left_menu_button{
position: absolute;
left: 10px;
z-index: 30;
width: 50px;
height: 50px;
border-radius: 50%;
}
.left_menu_button:hover .left_menu_span{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
}
.left_menu_button:hover .left_menu_span::after{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: 2px;
}
.left_menu_button:hover .left_menu_span::before{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: -2px;
}
.left_menu_span,
.left_menu_span::after,
.left_menu_span::before{
position: absolute;
width: 30px;
height: 4px;
background-color: #1f1a1e;
}
.left_menu_span{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left_menu_span::before{
content: '';
top: -10px;
}
.left_menu_span::after{
content: '';
top: 10px;
}
.left_menu_main_div_active .left_menu_span{
background-color: transparent;
}
.left_menu_main_div_active .left_menu_span::before{
top: 0;
transform: rotate(45deg);
}
.left_menu_main_div_active .left_menu_span::after{
top: 0;
transform: rotate(-45deg);
}
.left_menu_nav{
padding-top: 55px;
position: fixed;
z-index: 20;
display: flex;
flex-flow: column;
height: 100%;
width: 20%;
background-color: #2a2a2a;
overflow-y: auto;
left: -100%;
}
.left_menu_main_div_active .left_menu_nav{
left: 0;
}
.left_menu_link{
text-align: center;
padding: 10px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
color: white;
margin-top: 10px;
}
.left_menu_link:hover{
filter: brightness(0.7);
border: 1px solid black;
border-radius: 3px;
transition: 0.7s;
}
.left_menu_close_container{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.left_menu_main_div_active .left_menu_close_container{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_menu_container">
<div class="left_menu_main_div">
<a href="#" class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
</div>
</div>

Shouldn't function loggleMenu( be function ToggleMenu(?
Also where are you loading the script in the html?
Pop a few console.Log() calls into the script and see where it gets up to or fails.

Range Slider - Animate Output Number

I created a jsfiddle showing a simple range slider, with a max range of 4.
What I'm trying to achieve is to animate the number in the output, so for example if you're currently at 1 and you choose 4, 1 will go down and fade out, while 4 will come from the top and fade in. On the other hand, if you choose a lower number, the opposite will happen.
Thanks ahead for your help!
jsfiddle: https://jsfiddle.net/hm0gxs54/12/
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="range-slider-wrap range-slider-lg">
<input class="range-slider ng-valid ng-dirty ng-touched" step="1" type="range" id="range-slider" min="1" max="4" data-tooltip-top="true" aria-valuenow="3" aria-valuemin="1" aria-valuemax="4">
<output class="range-slider-output num" id="range-slider-output" for="range-slider"></output>
</div>
</div>
</div>
</div>
</div>
CSS
.range-slider-output {
position: relative;
display: inline-block;
padding: 0.2em 0.75em 0.25em;
color: #fff;
text-align: center;
background: #666;
border-radius: 3px;
width: 100%;
left: calc(50%);
flex: 0 0 5%;
align-self: center;
margin: 0;
font-size: 28px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: -92px;
}
.range-slider-output::before {
position: absolute;
top: 50%;
left: 0;
content: "";
}
.range-slider-lg .range-slider-output::before {
top: 48px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #666 transparent transparent transparent;
transition: all 0.7s ease-out;
}
.range-slider-wrap {
min-width: 100px;
}
input[type='range'] {
width: 100%;
cursor: pointer;
padding-top: 90px;
}
input[type='range'] {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
-webkit-appearance: none;
padding: 0 0.5rem;
}
input[type='range']::-moz-range-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
-webkit-appearance: none;
}
input[type='range']::-moz-range-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
}
JS
$(function() {
var slider = document.getElementById("range-slider");
var output = document.getElementById("range-slider-output");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});