Check out the LimeSurvey source code on GitHub!

Modification graphique d'un slider

More
2 years 10 months ago #107494 by baptiste01
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
Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form