Welcome, Guest
Username: Password: Remember me

TOPIC: Modification graphique d'un slider

Modification graphique d'un slider 6 months 1 week ago #107494

  • baptiste
  • baptiste's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
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,
The administrator has disabled public write access.
Moderators: Nickko
Time to create page: 0.136 seconds
Donation Image