Comment créer un curseur de plage d'entrée personnalisée

-2

Je souhaite créer un curseur personnalisé comme indiqué dans l'image. Comment puis-je faire ceci? S'il vous plaît voir le violon que j'ai lié afin que vous puissiez voir ce que j'ai déjà essayé.Comment créer un curseur de plage d'entrée personnalisée

<h2>working slider input range</h2> 
 
<input class="slider-info" name="gdskill[1]" id="gdskill1" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output1.value = gdskill1.value" /> 
 
<output id="Output1">0</output> 
 

 

 
<input name="gdskill[2]" id="gdskill2" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output2.value = gdskill2.value" /> 
 
<output id="Output2">0</output> 
 

 
<datalist id="ticks"> 
 
    <option>0</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    <option>6</option> 
 
    <option>7</option> 
 
    <option>8</option> 
 
    <option>9</option> 
 
    <option>10</option> 
 
</datalist> 
 

 

 
<h2>I want a design like the one shown in the image above. Is this possible? Can anyone help me with it as I am a little new to CSS.</h2>

lien Fiddle: https://jsfiddle.net/9qgx71kd/2/

Source

2017-08-09 Mr world wide

https://css-tricks.com/styling-cross-browser-comp able-range-inputs-css/ – fix

@fix pouvez-vous s'il vous plaît donner une démo de travail –

Voici le meilleur que je pourrais faire dans un bref délai, même si vous aurez envie de tester à travers IE et Firefox. Cela nécessitera probablement quelques ajustements mais devrait être un bon début.

https://jsfiddle.net/9qgx71kd/3/

**** **** HTML

<input name="gdskill[1]" id="gdskill1" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output1.value = gdskill1.value" /><br /> 
<output id="Output1" class="output">0</output> 

<div> 
<input name="gdskill[2]" id="gdskill2" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output2.value = gdskill2.value" /><br /> 
<output id="Output2" class="output">0</output> 
</div> 

<datalist id="ticks"> 
    <option>0</option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
    <option>10</option> 
</datalist>

**** **** CSS

.output { 
    width: 100%; 
    margin-left: 50%; 
} 

input[type=range] { 
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ 
    height:5px; 
    width:100%; 
    cursor: pointer; 
    background: #07C; 
    margin-bottom: 10px; 
} 

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: 2px solid #07C; 
    height: 20px; 
    width: 20px; 
    border-radius: 20px; 
    background: #fff; 
    cursor: pointer; 
    margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
} 

input[type=range]:focus { 
    outline: none; 
}

Si vous voulez ajouter une ombre au thumb-slider vous pouvez ajouter box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); au bloc input[type=range]::-webkit-slider-thumb

Source

2017-08-09 20:50:28 Ricktron3000

Meilleur que vous pourriez faire? Qu'est ce qui ne va pas avec ça? – Strawberry

N'a pas tenu compte des navigateurs autres que Chrome et ne correspond pas exactement à l'image demandée. La barre coulissante ne remplit que le tic sélectionné dans l'exemple. – Ricktron3000

Vous pouvez utiliser une librairie javascript qui remplacent l'élément d'entrée avec des éléments de style facile par exemple JCF. Voir leur demo page.

Source

2017-08-09 20:30:53

Comment créer un curseur de plage d'entrée personnalisée

Répondre

Questions connexes