Modification graphique d'un slider

More
3 years 5 months ago #107494 by baptiste01
baptiste01 created the topic: Modification graphique d'un slider
Bonjour,

Je souhaiterais effectuer une modification graphique sur un slider, car actuellement il n'est pas très joli (sur le thème "Révolution V12")

Voici le rendu actuel :

cl.ly/image/2z0V1I3E2k0Z/Image%202014-04...%2011.33.05%20AM.png

Voici le code dans template.css qui à priori permet ce rendu :
 * Slider for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
.ui-slider {
  display: inline-block;
  vertical-align: middle;
  position: relative;
 
  width: 100%;
  margin-top: -5px;
  top: 50%;
  left: 0;
}
.ui-slider-horizontal {
  width: 210px;
  height: 20px;
}
 
.ui-slider-vertical {
  height: 210px;
  width: 20px;
}
 
.ui-slider {
  cursor: pointer;
  background-color: #f7f7f7;
  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.slider-selection {
  position: absolute;
  background-color: #f7f7f7;
  background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5));
  background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5);
  background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5);
  background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

Et voici à quoi je souhaiterais qu'il ressemble plutôt :

www.w3schools.com/jquerymobile/jquerymobile_form_sliders.asp (avec l'affichage du chiffre au milieu)

Je n'ai pas le niveau pour faire cette modification, si quelqu'un avait un peu de temps pour me dire où mettre quoi, ce serait top !!

Merci d'avance,

Please Log in to join the conversation.

Moderators: Nickko

Start now!

Just create your account and start using Limesurvey today.

Register now