범위 입력에 대한 값 기포

HTML의 범위 입력은 다음과 같습니다.

그들을 지원하는 브라우저에서는 다음과 같습니다.

이제 그것은 훌륭합니다. 최소 및 최대 값이 적용되는 사용자로부터 숫자를 수집하려는 곳에 사용할 수 있습니다.

하지만 이상한 점이 있습니까? 그 자체로는 그 범위 입력은 실제로 어떤 숫자를 제출할 것인지 사용자에게 통신하지 않습니다. 당신의 의견이“어떻게 느끼고 있습니까? 슬프고, 행복을 위해 옳습니다”와 같은 것입니다. - 그렇습니다. 아마도 사용자에게 숫자를 보여줄 필요가 없습니다. 그러나 나는 숫자를 보여주지 않는 것보다 숫자를 보여 주어야한다는 것이 더 일반적입니다.

공정하게 말하면, 사양은 다음과 같이 말합니다.

입력 요소는 요소의 값을 숫자를 나타내는 문자열로 설정하기위한 컨트롤을 나타내지 만 정확한 값이 중요하지 않다는 경고를 사용하면 UAS가 숫자 상태보다 더 간단한 인터페이스를 제공하도록합니다.

그러나 C'mon은 멋진 슬라이더를 원하기 때문에 자동으로 사용자가 제출 된 값을 아는 것을 방지해야한다는 의미는 아닙니다. 반드시 브라우저가 해당 숫자를 보여주기 위해 UI 제어를 변경해야한다고 말하는 것은 아닙니다. 나는 우리가 스스로를 만들어야한다고 말하고 있습니다!

이것은

태그의 완벽한 사용 사례이며, 특히 양식 요소에 의해 계산 된 값에 대한 것입니다. 다음은 사용 방법에 대한 매우 간단한 구현입니다.

 
<output for="foo" onforminput="value = foo.valueasnumber;"> </output>

업데이트! 더 잘 작동하는 바닐라 JavaScript의 새 버전.

여기서 우리의 목표는 범위 입력의 현재 값을 보여주는 "버블"을 표시하는 것입니다.

입력 값에서 "버블"의 값을 설정하는 것은 범위 값을 끌어 내고 거품에 넣는 것입니다.

 range.addeventListener ( "입력", () => {
  bubble.innerhtml = rangel.value;
});

트릭은 범위 입력을 따라 버블을 배치하여 "엄지"와 함께 미끄러 져 들어갑니다. 이를 위해서는 거품이 왼쪽으로 스카우트해야 할 %를 계산해야합니다. 그래서 일을 깨끗하게 유지하기 위해 그렇게하는 기능을하자 :

 range.addeventListener ( "입력", () => {
  setBubble (범위, 버블);
});

함수 setBubble (범위, 버블) {
  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;

  // 네이티브 UI 엄지 크기에 따라 정렬 마법 번호
  bubble.style.left = newVal = "%";
}

여기서는 범위 입력 최소 및 최대 속성을 설명하고 해당 범위의 현재 값에 따라 0-100 사이의 % 위치를 계산합니다. 모든 범위가 기본 0-100 숫자가 아니므로 범위가 0 ~ 200 범위의 값 50에 있다고 말합니다. 이것은 그것을 설명합니다.

그러나 그것은 하나의 성가신 결함을 가지고 있습니다. 거품은 시작시 왼쪽까지 너무 멀리, 끝에서 오른쪽까지 너무 멀습니다. 범위 입력에서 엄지는 왼쪽 가장자리에 매달려 있지 않으므로 중심이 시작되고 끝에 동일합니다. 스크롤 바처럼 엄지 손가락의 가장자리가 트랙 안에 멈 춥니 다.

우리는 브라우저에서 잘 작동하는 것처럼 보이는 마법 숫자를 사용할 수 있습니다.

 // 네이티브 UI 엄지 크기에 따라 정렬 마법 번호
  bubble.style.left =`calc ($ {newval}% ($ {8 -NewVal * 0.15} px)`;

마지막 데모는 다음과 같습니다.

독자 Maxgloba가 여기에 게시 할 버전으로 글을 썼기 때문에 이것으로 주위를 찌르는 데 영감을 받았습니다.

Max 버전의 멋진 측면은 범위 입력이 CSS 스타일이므로 엄지 손가락의 정확한 크기가 알려져 있다는 것입니다. JavaScript 수학에는 다소 마술을 느끼는 숫자가 있지만 적어도 엄지 손가락 크기에 대한 CSS에 설정된 실수를 기반으로합니다.

다른 버전

Dave Olsen은 (원본) 아이디어를 jQuery에 의존하지 않도록 포팅했습니다. 그 버전은 다음과 같습니다.

Sean Stopnik :

Simurai :

Vincent Durand :

Range Input은 잊을 수있는 데 거의 노치를 넣을 수있는 데이터리스트가있을 수 있습니다.

Ana Tudor는 대규모 컬렉션을 보유하고 있으며, 그 중 다수는 디자인을 통해 현재 가치를 나타냅니다.

? 이 게시물의 원본 버전 (JQuery, 플러스도 작동하지 않음)의 이전 버전

역사적 이유로 이것을 여기에 두십시오.

우리 친구 jQuery를 잡아 당기고 CSS를 입자합시다. 이 목표는 다음과 같습니다. 모든 범위 입력, 언제든지 최소/최대/단계 - 현재 값을 보여주는 기포를 그 위에 놓습니다.

출력 요소를 먼저 스타일링합시다. 우리는 그것을 입력 위에 절대적으로 배치 할 것입니다. 그것은 우리가 JavaScript를 사용하여 그것이 무엇인지 알아 내면 왼쪽 값을 조정할 수있는 능력을 제공합니다. 우리는 그라디언트와 국경-라디우스로 그것을 공상하고, 심지어 의사 요소와 함께 약간의 포인터 삼각형을 추가합니다.

 출력 { 
  위치 : 절대;
  배경 이미지 : 선형 그레이드 (상단, #444444, #999999);
  너비 : 40px; 
  높이 : 30px; 
  텍스트 정렬 : 센터; 
  색상 : 흰색; 
  Border-Radius : 10px; 
  디스플레이 : 인라인 블록; 
  글꼴 : 굵은 15px/30px 조지아;
  하단 : 175%;
  왼쪽 : 0;
  마진 왼쪽 : -1%;
}
출력 : {이후 
  콘텐츠: "";
  위치 : 절대;
  너비 : 0;
  높이 : 0;
  테두리 : 10px 솔리드 #999999;
  왼쪽 경계 : 5px 고체 투명;
  경계 오른쪽 : 5px 고체 투명;
  상단 : 100%;
  왼쪽 : 50%;
  마진 왼쪽 : -5px;
  마진 -탑 : -1px;
}

이제 우리가해야 할 일은 값의 변화를위한 모든 범위 입력을 보는 것입니다. 우리의 목표는 슬라이더와 속도로 거품의 왼쪽 위치를 이동시키는 것입니다. 그것은 세상에서 가장 간단한 것이 아닙니다. 슬라이더는 너비와 최소값 또는 최대 값 일 수 있다는 것입니다. 우리는 약간의 수학을해야 할 것입니다. 다음은 모든 jQuery JavaScript입니다.

 // 돔 준비
$ (function () {
 Var El, Newpoint, Newplace, 오프셋;
 
 // 모든 범위 입력을 선택하고 변경 사항을 확인하십시오
 $ ( "input [type = 'range']"). Change (function () {
 
   // 효율성을 위해 이것을 캐시합니다
   el = $ (this);
   
   // 범위 입력 너비를 측정합니다
   너비 = el.width ();
   
   // 입력의 왼쪽과 오른쪽 사이의 배치 백분율 파악
   newPoint = (el.val () -el.attr ( "min")) / (el.attr ( "max") -el.attr ( "min");
   
   // 포인터가 더 나은 줄을 끄는 janky 값
   오프셋 = -1.3;
   
   // 버블이 왼쪽 또는 오른쪽을 넘어서 방지 (지원되지 않는 브라우저)
   if (newPoint  1) {newplace = 너비; }
   else {newplace = width * NewPoint 오프셋; 오프셋 -= NewPoint; }
   
   // 거품을 움직입니다
   엘자
     .next ( "출력")
     .CSS ({
       왼쪽 : Newplace,
       Marginleft : "%"오프셋
     })
     .Text (el.val ());
 })
 // 페이지로드에서 포지셔닝 버블의 변경 가짜
 .Trigger ( 'Change');
});

거기에서 하나의 거대한 부분은 그 1.3 값입니다. 나는 슬라이더의 중심과 함께 거품 삼각형의 끝을 정렬하려고했다. 슬라이더 센터는 결코 100% 왼쪽이나 오른쪽이 아니기 때문에 쉽지 않습니다. 그 가치는 완벽하지도 않고 완벽하게 구현되지 않았지만 그것을 가지고 있지 않는 것보다 낫습니다.

보너스로, 범위 입력을 지원하지 않는 브라우저는 여전히 버블 동작을 얻습니다.

위의 코드는 지정된 최소 및 최대 값을 갖는 범위 입력에 따라 다릅니다 . 그들이 끊어지지 않으면 부러진다. 나는 이러한 것들을 지정하지 않고 범위 입력을 사용하는 것이 이상하다고 생각하지만, 그렇지 않은 경우 0과 100으로 기본적으로 보인다. 같은 것 :

 var minvalue, maxValue;
if (! el.attr ( "min")) {minValue = 0; } else {minValue = el.attr ( "min"); }

… 그런 다음 수학에서 MinValue 변수를 사용하십시오. Max와 비슷합니다. 어쨌든, 여기 라이브 데모가 있습니다.

위 내용은 범위 입력에 대한 값 기포의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!