Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

JQuery, PHP, XHTML, Slider - zmiana kolorów suwaka

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

JQuery, PHP, XHTML, Slider - zmiana kolorów suwaka

Post 17.04.2017, 17:55:49

Witam

Co robię źle, albo o czym zapomniałem???

Chciałem na swoją stronkę wrzucić slider /suwak/
http://gabrieltomescu.com/blog/color-range-slider-with-jquery-ui-and-css
jednak coś mi nie wychodzi.

Kod jaki wprowadzam to:
Kod: Zaznacz cały
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style>.ui-slider, .ui-slider .slider-range-inverse, .ui-slider .ui-slider-range {
  height: 14px;
  border-radius: 10px;
  border-width: 0;
}

body {
  background: #F0F0F0;
  font-family: Helvetica, Arial;
}

h1 {
  text-align: center;
  color: #444;
  margin-top: 50px;
}

#slider-container {
  width: 80%;
  height: 80px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  top: 50%;
  margin: 0 auto;
  text-align: center;
  background: #FFF;
  border-radius: 5px;
  padding: 35px 40px 30px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ui-slider {
  background-color: #1ABC9C;
  background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  background-image: linear-gradient(to right,#1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
}
.ui-slider * {
  outline: none;
}
.ui-slider .slider-range-inverse {
  background: #CCC;
  position: absolute;
  right: 0;
}
.ui-slider .ui-slider-range {
  background: transparent;
}
.ui-slider .ui-slider-handle {
  width: 28px;
  height: 28px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background: #FFF;
  top: -7px;
  border-radius: 50%;
  border-width: 0;
}
.ui-slider .ui-slider-handle:active {
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
}
.ui-slider .ui-slider-handle .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
  background: transparent;
  overflow: hidden;
}
.ui-slider .ui-slider-handle .dot .handle-track {
  display: block;
  height: 18px;
  background-color: #1ABC9C;
  background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  background-image: linear-gradient(to right,#1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  position: absolute;
  padding-right: 18px;
}
</style>
   
 
  </head>
  <body>
<script type="text/javascript">
(function() {
  var update_handle_track_pos;

  update_handle_track_pos = function(slider, ui_handle_pos) {
    var handle_track_xoffset, slider_range_inverse_width;
    handle_track_xoffset = -((ui_handle_pos / 100) * slider.clientWidth);
    $(slider).find(".handle-track").css("left", handle_track_xoffset);
    slider_range_inverse_width = (100 - ui_handle_pos) + "%";
    return $(slider).find(".slider-range-inverse").css("width", slider_range_inverse_width);
  };

  $("#js-slider").slider({
    range: "min",
    max: 100,
    value: 50,
    create: function(event, ui) {
      var slider;
      slider = $(event.target);
      slider.find('.ui-slider-handle').append('<span class="dot"><span class="handle-track"></span></span>');
      slider.prepend('<div class="slider-range-inverse"></div>');
      slider.find(".handle-track").css("width", event.target.clientWidth);
      return update_handle_track_pos(event.target, $(this).slider("value"));
    },
    slide: function(event, ui) {
      return update_handle_track_pos(event.target, ui.value);
    }
  });

}).call(this);

</script>

<h1>Color Range Slider</h1>

<div id="slider-container">
  <div id="js-slider"></div>
</div>
  </body>
</html>


Po odpaleniu tej stronki w przeglądarce, wyświetla mi tylko tekst "Color Range Slider" bez tego suwaka a powinno to wyglądać tak
Obrazek

Co robię nie tak???
alvarofun
Posty: 1
Dołączył(a): 17.04.2017

Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Yahoo [Bot] i 1 gość

Hosting, Domeny, SSL

Subskrypcja

Mamy 50887 zarejestrowanych użytkowników.
Najnowszy użytkownik: oruwepucu


Nasi użytkownicy napisali:

  • 936370 wiadomości
  • w 246834 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)