Theme

Wiki Pages: Home | FAQ | Setup | Options | Events | Theme | Change

HTML

HTML (no canvas)

<div id="slider" class="pathslider">
  <div class="pathslider-grip {theme}" data-degrees="0" data-position="50"></div>
</div>

HTML (with canvas)

<div id="slider" class="pathslider">
  <div class="pathslider-grip" data-degrees="0" data-position="50"></div>
  <canvas class="pathslider-canvas" width="300" height="300"></canvas>
</div>

CSS ID/Classes

#slider

#slider {
  width: 200px;
  height: 200px;
  background: url(background.png) 10px 10px no-repeat;
}

• Unique ID of the Pathslider
• This css definition needs to have the width and height set as well as any background image.
• The width and height are the minimum dimensions of the slider, as calculated by the Pathslider builder.

.pathslider

• Applied to the original element that Pathslider was called on (#slider in this case)
• The css only changes the element position to relative so the grip can be positioned absolutely inside.

.pathslider {
  position: relative;
}

.pathslider-grip

• Basic styling of the grip 30 x 15 pixels with a drop shadow and border radius.
• The only required css is the position absolute, z-index and dimensions.

/* essential css shown, extra fancy stuff removed from this example */
.pathslider-grip {
  width: 30px;
  height: 15px;
  position: absolute;
  z-index: 10;
  cursor: move;
}

{theme}

• This is the class name added by the gripClass option.
• Provided grip themes include "silver", "black", "chrome1" and "chrome2".

/* basic black, background-image gradients removed from this example because it's messy ;) */
.black {
  border-color: #000000
  background-color: #3b3b3b;
}

.sliding

• The "sliding" class name is added to the grip/handle while the the user is interacting with it.
• Basically this class is added when the "start" event occurs and removed when the "stop" event is fired.
• In the default css, this class adds the blue box shadow "glow" while sliding.
• This definitions was combined with the pathslider-grip:hover definition:

/* grip hover/sliding state */
.pathslider-grip.sliding, .pathslider-grip:hover {}