диапазон ввода angularjs написать внутри пересечения пузыря - PullRequest
Новая
       26

диапазон ввода angularjs написать внутри пересечения пузыря

0 голосов
/ 07 декабря 2018

Я хочу написать внутри пузырька диапазона, поэтому я фиксирую дизайн ползунка диапазона и просто хочу написать внутри номера пузырька:

введите описание изображения здесь

так что я хочу написать в кружке число, так что я должен использовать в angularJS или javascript коде, чтобы написать внутри этого круга, и тоже изменить число с кружком, какую модель я должен использовать в JavaScript, чтобы быть полным.

поэтому я использовал этот html: 

 <input type="range" min="0" max="10000"  value="2500" />

и использовал этот css: 

  input[type=range] {
      -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
      width: 100%; /* Specific width is required for Firefox. */
      background: transparent; /* Otherwise white in Chrome */
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
    }

    input[type=range]:focus {
      outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
    }

    input[type=range]::-ms-track {
      width: 100%;
      cursor: pointer;

      /* Hides the slider so custom styles can be added */
      background: transparent; 
      border-color: transparent;
      color: transparent;
    }



    /* Special styling for WebKit/Blink */
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      /* border: 1px solid #000000; */
      border-radius: 50% !important;
      height: 60px;
      width: 60px;
      border-radius: 3px;
      background: #ffa200;
      cursor: pointer;
      margin-top: -28px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
      /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; Add cool effects to your sliders! */
    }

    /* All the same stuff for Firefox */
    input[type=range]::-moz-range-thumb {
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
      border: 1px solid #000000;
      height: 36px;
      width: 16px;
      border-radius: 3px;
      background: #ffa200;
      cursor: pointer;
    }

    /* All the same stuff for IE */
    input[type=range]::-ms-thumb {
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
      border: 1px solid #000000;
      height: 36px;
      width: 16px;
      border-radius: 3px;
      background: #ffa200;
      cursor: pointer;
    }

    input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 4px;
      cursor: pointer;
      /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
      background: #000;
      border-radius: 1.3px;
      /* border: 0.2px solid #010101; */
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
      background: #000;
    }

    input[type=range]::-moz-range-track {
      width: 100%;
      height: 8.4px;
      cursor: pointer;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
      background: #000;
      border-radius: 1.3px;
      border: 0.2px solid #010101;
    }

    input[type=range]::-ms-track {
      width: 100%;
      height: 8.4px;
      cursor: pointer;
      background: transparent;
      border-color: transparent;
      border-width: 16px 0;
      color: transparent;
    }
    input[type=range]::-ms-fill-lower {
      background: #2a6495;
      border: 0.2px solid #010101;
      border-radius: 2.6px;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    input[type=range]:focus::-ms-fill-lower {
      background: #3071a9;
    }
    input[type=range]::-ms-fill-upper {
      background: #3071a9;
      border: 0.2px solid #010101;
      border-radius: 2.6px;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    input[type=range]:focus::-ms-fill-upper {
      background: #367ebd;
    }


    input[type=range] {
      -webkit-appearance: none;
      margin: 18px 0;
      width: 100%;
    }
    input[type=range]:focus {
      outline: none;
    }

, поэтому надеюсь, что кто-то может помочь в этом ...

1 Ответ

0 голосов
/ 07 декабря 2018

Я предполагаю, что у вас должен быть тег для печати значения внутри круга.Теперь все, что вам нужно, это записать живое значение.Вы можете изменить ваш input так, чтобы он был примерно таким: 

<input type="range" min="0" max="10000"  value="2500" ngModel="data" />

на стороне angularjs, внутри контроллера, определите $scope.data и внутри круга, просто используйте {data} с вашим тегом.Это должно быть прекрасно

...