Как показать цифры в самом ползунке?

[anadikt]

Всем привет, подскажите как при помощи CSS или JS можно значение ползунка отобразить в самом бегунке?

 

[NightHunter]

<form onsubmit="return false" oninput="level.value = flevel.valueAsNumber">
<label for="flying">Flying Skill Level</label>
<input name="flevel" id="flying" type="range" min="0" max="100" value="0">
<output for="flying" name="level">0</output>/100
</form>

 

[anadikt]

<form onsubmit="return false" oninput="level.value = flevel.valueAsNumber">
<label for="flying">Flying Skill Level</label>
<input name="flevel" id="flying" type="range" min="0" max="100" value="0">
<output for="flying" name="level">0</output>/100
</form>

нет, не то ... на картинке ползунком выбрано 76, вот именно в центр круга (в сам ползунок) надо замостить значение

 

[NightHunter]

нет, не то ... на картинке ползунком выбрано 76, вот именно в центр круга (в сам ползунок) надо замостить значение

эм...надо пробовать...создай в круге блок и впиши туда вывод значения, + при необходимости зафиксируй блок

 

[anadikt]

эм...надо пробовать...создай в круге блок и впиши туда вывод значения, + при необходимости зафиксируй блок

в этом вся проблема, у круга стиль написал такой:

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 3px solid #f8ba27;
  height: 50px;
  width: 50px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -25px;

а как в него замостить блок даже не прадставляю

 

[Горбушка]

ШО? Опять?
Ну сколько можно просить поправить код по скриншоту???

 

[anadikt]

ШО? Опять?
Ну сколько можно просить поправить код по скриншоту???

сори, вот код:
Для просмотра ссылки Войди или Зарегистрируйся

 

[NightHunter]

в этом вся проблема, у круга стиль написал такой:

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 3px solid #f8ba27;
  height: 50px;
  width: 50px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -25px;

а как в него замостить блок даже не прадставляю

<output for="fader" name="level" id="volume">0</output>
сюда впихивай класс

 

[anadikt]

создаешь новый класс с любым название и пишешь стили, а в html разметку уже добавляешь сам блок, чтобы находился внутри этого круга

вот именно это и не знаю как сделать, поэтому решил спросить, может кто и подскажет или натолкнет на нужную мысль

<output for="fader" name="level" id="volume">0</output>
сюда впихивай класс

может подскажешь как сделать если знаешь?

 

[mdss]

Чем мучаться проще использовать плагин для jquery
Для просмотра ссылки Войди или Зарегистрируйся