Ergebnis 1 bis 5 von 5

Thema: Slider mit Labels - Label anklicken ausschalten

  1. #1
    Neuer Benutzer
    Registriert seit
    05.07.2019
    Beiträge
    4

    Slider mit Labels - Label anklicken ausschalten

    Hallo Leute,

    ich habe auf meiner Seite Sliders und habe mit Pips Labels dran gemacht.
    Ich habe mehrere Sliders miteinander verknüpft, so dass sie sich gleichzeitig bewegen. Das Problem ist, dass das nicht mehr funktioniert, wenn jemand auf ein Label klickt. Dann bewegt sich nur der einzelne Slider.
    Deswegen meine Frage, kann man die Funktion ausschalten. So dass man nicht mehr auf ein Label klicken kann?

    Liebe Grüße

    MaxCody

  2. #2
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.693
    Reden wir hier vom range slider? wenn du dafür halt ein zusätzliches plugin verwendest würde ich dort in der doku gucken wie und ob man die labels deaktivieren kann.
    Pakete werden jetzt mit $_DHL geliefert... nicht mehr mit $_POST

  3. #3
    Neuer Benutzer
    Registriert seit
    05.07.2019
    Beiträge
    4
    Also das ist mein Code:


    <!DOCTYPE html>
    <html lang="en">
    <style type="text/css">

    .ui-slider {
    border-radius: 20px;
    border: none;
    height: 5px;
    margin: 1em 4em 4em; }

    .ui-slider-handle {
    border: 0px solid #00918E !important;
    height: 23px !important;
    width: 13px !important;
    cursor: pointer;
    }

    .ui-slider-horizontal.ui-slider-pips {
    margin-bottom: 1.4em;
    }


    .ui-slider-pips .ui-slider-label,
    .ui-slider-pips .ui-slider-pip-hide {
    display: none;
    }

    .ui-slider-pips .ui-slider-pip-label .ui-slider-label {
    display: block;
    }

    .ui-slider-pips .ui-slider-pip {
    width: 2em;
    height: 1.5em;
    line-height: 1em;
    position: absolute;
    font-size: 12pt;
    color: #000000;
    overflow: visible;
    text-align: center;
    top: 18px;
    left: 20px;
    margin-left: -1em;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    /* postion of the first and last pip next to the slider*/
    .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
    left: -2.5em;
    top: -1.2em;
    font-size:12pt;
    text-align: right;
    }

    .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
    .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
    margin: 0; }

    .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
    left: 2.5em;
    top: -1.2em;
    font-size:12pt;
    text-align: left; }

    .ui-slider-pips .ui-slider-label {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -1em;
    width: 2em;
    font-weight: bold;
    }


    .ui-slider-pips [class*=ui-slider-pip-selected] .ui-slider-line,
    .ui-slider-pips .ui-slider-pip-inrange .ui-slider-line {
    background: black;
    }

    </style>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://simeydotme.github.io/jQuery-ui-Slider-Pips/dist/css/jqueryui.min.css" rel="stylesheet">
    <script src="https://rawgit.com/simeydotme/jQuery-ui-Slider-Pips/master/src/js/jquery-ui-slider-pips.js" ></script>
    <script>

    $(document).ready(function() {

    $(function() {

    $(".sliders")

    .slider({

    range: false,
    min: 0,
    max: 3,
    step: 1,
    })

    .slider("pips", {

    first: "label",
    last: "label",

    step: 1,
    labels: {first:"Links",last: "Rechts"}


    })

    })
    });
    </script>
    <script>

    $(document).ready(function() {

    $( function() {
    $("#slider1" ).slider({
    slide: function( event, ui ) {
    $("#slider2").slider("value", ui.value );
    }
    });


    $("#slider2" ).slider({
    slide: function( event, ui ) {
    $("#slider1").slider("value", ui.value );
    }
    });
    });
    });
    </script>


    <div id="slider1" class="sliders"></div>

    <div id="slider2" class="sliders"></div>

    </html>


    Die Slider bewegen sich synchron, aber wenn man auf Links bzw. rechts klickt, dann funktioniert das nicht. Deshalb würde ich das gerne ausschalten.

  4. #4
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.693
    Nimm das change event anstatt des slide events.

    Übirgens ist $(function () {…}) die kurzschreibweise für $(document).read(function () {…}); du brauchst also nicht beides, genauso wie 2x <script> 2x den .ready() wrapper, alles was du brauchst ist also:
    PHP-Code:
    $(function() {
      $(
    ".sliders").slider({
        
    rangefalse,
        
    min0,
        
    max3,
        
    step1,
      }).
    slider("pips", {
        
    first"label",
        
    last"label",
        
    step1,
        
    labels: {first:"Links",last"Rechts"}
      });
      $(
    "#slider1" ).slider({
        
    change: function( eventui ) {
          $(
    "#slider2").slider("value"ui.value );
        }
      });
      $(
    "#slider2" ).slider({
        
    change: function( eventui ) {
          $(
    "#slider1").slider("value"ui.value );
        }
      });
    }); 
    Pakete werden jetzt mit $_DHL geliefert... nicht mehr mit $_POST

  5. #5
    Neuer Benutzer
    Registriert seit
    05.07.2019
    Beiträge
    4
    Jeder fängt mal klein an
    Danke für deine Tipps!
    Und es funktioniert

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •