Bonjour, 

Pour un projet, j'aimerais faire une range qui se comporte comme une barre de progression. J'ai trouvé quelque chose qui me conviendrait :

https://codepen.io/nlfonseca/pen/MwbovQ

Petit problème, je n'ai pas du tout le résultat escompté... 

voilà ce que j'ai sous Chrome.

Est ce que quelqu'un aurait une idée de pourquoi ça ne marche pas ? 

Merci d'avance pour vos réponses 

Bonjour,

si tu cherches une barre de progression, <progress> est probablement plus adapté : https://www.w3.org/TR/html/sec-forms.html#the-progress-element .

Je cherche pas vraiment une barre de progression,

je veux avoir une barre qui permettra de choisir des valeurs (un input=range) mais que la partie a gauche du "pointeur" change de couleur, comme si la barre se remplissait.

j'avais déjà trouvé un exemple, mais esthétiquement ça me plait pas trop :

https://codepen.io/noahblon/pen/OyajvN

Bonjour,

Il n'est malheureusement pas possible de te répondre car tu ne nous donnes pas tes codes HTML et CSS, nous ne pouvons donc pas comparer tes codes et celui du CodePen afin de traquer une éventuelle différence.

Ah oui désolé...

l'html : 

<div>

  <input type="range"  min="0" max="100" value="40"/>

</div>

et le SCSS

@import 'bourbon/bourbon';

$slider-width-number: 240;
$slider-width: #{$slider-width-number}px;
$slider-height: 2px;
$background-slider: #c7c7c7;
$background-filled-slider: #e33d44;
$thumb-width: 28px;
$thumb-height: 18px;
$thumb-radius: 8px;
$thumb-background: #fff;
$thumb-border: 1px solid #777;
$shadow-size: -8px;
$fit-thumb-in-slider: -8px;

@function makelongshadow($color, $size) {
  $val: 5px 0 0 $size $color;

  @for $i from 6 through $slider-width-number {
    $val: #{$val}, #{$i}px 0 0 $size #{$color};
  }

  @return $val;
}

div {
  height: 100px;
  display: flex;
  justify-content: center;
}

input {
  align-items: center;
  appearance: none;
  background: none;
  cursor: pointer;
  display: flex;
  height: 100%;
  min-height: 50px;
  overflow: hidden;
  width: $slider-width;

  &:focus {
    box-shadow: none;
    outline: none;
  }

  &::-webkit-slider-runnable-track {
    background: $background-filled-slider;
    content: '';
    height: $slider-height;
    pointer-events: none;
  }

  &::-webkit-slider-thumb {
    @include size($thumb-width,$thumb-height);

    appearance: none;
    background: $thumb-background;
    border-radius: $thumb-radius;
    box-shadow: makelongshadow($background-slider, $shadow-size);
    margin-top: $fit-thumb-in-slider;
    border: $thumb-border;
  }


  &::-moz-range-track {
    width: $slider-width;
    height: $slider-height;
  }

  &::-moz-range-thumb {
    @include size($thumb-width, $thumb-height);

    background: $thumb-background;
    border-radius: $thumb-radius;
    border: $thumb-border;
    position: relative;
  }

  &::-moz-range-progress {
    height: $slider-height;
    background: $background-filled-slider;
    border: 0;
    margin-top: 0;
  }

  &::-ms-track {
    background: transparent;
    border: 0;
    border-color: transparent;
    border-radius: 0;
    border-width: 0;
    color: transparent;
    height: $slider-height;
    margin-top: 10px;
    width: $slider-width;
  }

  &::-ms-thumb {
    @include size($thumb-width, $thumb-height);

    background: $thumb-background;
    border-radius: $thumb-radius;
    border: $thumb-border;
  }

  &::-ms-fill-lower {
    background: $background-filled-slider;
    border-radius: 0;
  }

  &::-ms-fill-upper {
    background: $background-slider;
    border-radius: 0;
  }

  &::-ms-tooltip {
    display: none;
  }
}

Dans l'idéal, je voudrais savoir si il y un équivalent à ::-ms-fill-lower et à ::-moz-range-progress pour les autres navigateurs.

-
Edité par LucienMuller1 20 juin 2019 à 11:00:03