Help with jslider Plugin

Asked

Viewed 27 times

0

Has anyone ever used that plugin? I’m trying to implement it on a page but I’m not getting it and the documentation has nothing. I managed to implement the html and some issues in css as shown below.

inserir a descrição da imagem aqui

HTML

<div class="form-group"> 
<input id="salary" class="value-slider" type="text" name="valor" value="0;6270" style="display: none;">
<span class="jslider jslider_round jslider-limitless">
<table>
<tbody>
<tr>
<td>
<div class="jslider-bg"><i class="l"></i><i class="f"></i><i class="r"></i><i class="v" style="left: 0%; width: 62.7%;"></i></div>
<div class="jslider-pointer" style="left: 0%; z-index: 0;"></div><div class="jslider-pointer jslider-pointer-to" style="left: 62.7%; z-index: 2;"></div>
<div class="jslider-label"><span>0</span></div><div class="jslider-label jslider-label-to"><span>10, 000</span> R$</div>
<div class="jslider-value" style="left: 0%; right: auto; visibility: visible;"><span>0</span> R$</div>
<div class="jslider-value jslider-value-to" style="visibility: visible; left: 62.7%; right: auto;"><span>6, 270</span> R$</div><div class="jslider-scale"><span style="left: 0%"><ins>0</ins></span><span style="left: 10%"><ins>1000</ins></span><span style="left: 20%"><ins>2000</ins></span><span style="left: 30%"><ins>3000</ins></span><span style="left: 40%"><ins>4000</ins></span><span style="left: 50%"><ins>5000</ins></span><span style="left: 60%"><ins>6000</ins></span><span style="left: 70%"><ins>7000</ins></span><span style="left: 80%"><ins>8000</ins></span><span style="left: 90%"><ins>9000</ins></span><span style="left: 100%"><ins>10000</ins></span>
</div></td>
</tr>
</tbody>
</table>
</span> 
<div class="clearfix">
</div> 
</div>

CSS:

.jslider { display: block; width: 100%; height: 1em; position: relative; top: 0.6em; font-family: Arial, sans-serif; }
  .jslider table { width: 100%; border-collapse: collapse; border: 0; }
  .jslider td, .jslider th { padding: 0; vertical-align: top; text-align: left; border: 0; }

  .jslider table,
  .jslider table tr,
  .jslider table tr td { width: 100%; vertical-align: top; }

  .jslider .jslider-bg { position: relative; }
  .jslider .jslider-bg i { height: 10px; position: absolute; font-size: 0; top: 0; border:3px solid #ced7d9 ; box-shadow:0px 2px 0px rgba(249,250,250, .9); }
  .jslider .jslider-bg .l { width: 10%; background:#ced7d9; left: 0; border-radius:5px 0 0 5px;}
  .jslider .jslider-bg .f { width: 80%; left: 10%; background:#ced7d9; }
  .jslider .jslider-bg .r { width: 10%; left: 90%; background:#ced7d9; border-radius:0 5px 5px 0;  }
  .jslider .jslider-bg .v { position: absolute; width: 60%; left: 20%; top: 0; height: 10px; background:#5f666b; border-radius:5px; }

  .jslider .jslider-pointer { width: 18px; height: 19px; background:#3498db; border-radius:8px; position: absolute; left: 20%; top: -2px; margin-left: -6px; cursor: pointer; cursor: hand; z-index:2; }
  .jslider .jslider-pointer-hover { background-position: -20px -60px; }
  .jslider .jslider-pointer-to { left: 80%; }

  .jslider .jslider-label { font-size: 9px; line-height: 12px; color: black; opacity: 0.4; white-space: nowrap; padding: 0px 2px; position: absolute; top: -18px; left: 0px; }
  .jslider .jslider-label-to { left: auto; right: 0; }

  .jslider .jslider-value { font-size: 9px; white-space: nowrap; padding: 1px 2px 0; position: absolute; top:5px; margin:10px 0 0 0; left: 20%; background: white; line-height: 12px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;}
  .jslider .jslider-value-to { left: 80%; }

  .jslider .jslider-label small,
  .jslider .jslider-value small { position: relative; top: -0.4em; }

  .jslider .jslider-scale { position: relative; top: 9px; }
  .jslider .jslider-scale span { position: absolute; height: 5px; border-left: 1px solid #999; font-size: 0; margin:2px 0 0 0;}
  .jslider .jslider-scale ins { font-size: 9px; text-decoration: none; position: absolute; left: 0px; top: 5px; color: #999; }

  .jslider-single .jslider-pointer-to,
  .jslider-single .jslider-value-to,
  .jslider-single .jslider-bg .v,
  .jslider-limitless .jslider-label { display: none; }

The problem is I’m having trouble interacting with slider, if anyone has used or has any example of how to use or other plugin idea, I am grateful.

  • Interact in what sense? What exactly is the problem with it?

  • I’m not getting the pointers moving.

  • I tried to create a pen in codepen and it doesn’t really work with jquery 3. With jQuery 1.7 it works

  • Peter, can you give me the example you created? Thank you.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.