locked
Custom input[type=range] tooltip RRS feed

  • Question

  • Can we put custom text to ::-ms-tooltip, like time in player slider.  Or we need implement it from scretch?
    Thursday, April 25, 2013 7:38 PM

Answers

  • I think what you would need to do, is calculate a percentage based on the width of the range element and add the offset element to it. This would then need to be converted ack to pixels for the absolute positioning of the tooltip. I've put together an example here http://jsfiddle.net/CYSeY/4/

    code below

     //styles
    #range{
    margin-left:100px;
    }
    #tip{
    
    position:absolute;
    display:none;
    border:1px solid black;
    padding:4px;
    }
    
    //html
    <input type='range' id='range' min='0' max='20' value='0' />
    <div id='tip'>Some tip</div>
    
    
    //js (onload or WinJS Page ready event)
    var r = document.getElementById('range');
    var max = r.getAttribute('max');
    var min = r.getAttribute('min');
    var w = r.clientWidth;
     //w += r.offsetLeft;
    var isDragging = false;
    
    var moveTip = (function(e){
    if(isDragging){
     var posPerc = (r.value/max) * 100;
    var pixPos = (posPerc/100) * w;
    pixPos += r.offsetLeft;
    
    document.getElementById('tip').style.display = 'block';
     document.getElementById('tip').style.left = pixPos +'px';
    }
    });
    
    r.onmousedown = (function(e){
       isDragging = true;
        r.addEventListener('mousemove',moveTip,false);
     });
    r.onmouseup = (function(e){
    isDragging = false;
    r.removeEventListener('mousemove',moveTip);
     document.getElementById('tip').style.display = 'none';
    });
    The code above could be tidied up a bit but is a good starting point
    • Marked as answer by Song Tian Thursday, May 2, 2013 9:11 AM
    Monday, April 29, 2013 4:38 PM

All replies

  • Which slider are you referring to?  It sounds like something you could try and let us know if it works.  If it does not, please post code.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, April 26, 2013 6:59 PM
    Moderator
  • Which slider are you referring to?
    Seek slider in player (MMP.PF). Value if input is timestamp and I want tooltip with human readable time when user scrubbing.
    Now I think it's impossible with css. And I should write a lots of javascript code for this little feature.
    Friday, April 26, 2013 8:00 PM
  • I think what you would need to do, is calculate a percentage based on the width of the range element and add the offset element to it. This would then need to be converted ack to pixels for the absolute positioning of the tooltip. I've put together an example here http://jsfiddle.net/CYSeY/4/

    code below

     //styles
    #range{
    margin-left:100px;
    }
    #tip{
    
    position:absolute;
    display:none;
    border:1px solid black;
    padding:4px;
    }
    
    //html
    <input type='range' id='range' min='0' max='20' value='0' />
    <div id='tip'>Some tip</div>
    
    
    //js (onload or WinJS Page ready event)
    var r = document.getElementById('range');
    var max = r.getAttribute('max');
    var min = r.getAttribute('min');
    var w = r.clientWidth;
     //w += r.offsetLeft;
    var isDragging = false;
    
    var moveTip = (function(e){
    if(isDragging){
     var posPerc = (r.value/max) * 100;
    var pixPos = (posPerc/100) * w;
    pixPos += r.offsetLeft;
    
    document.getElementById('tip').style.display = 'block';
     document.getElementById('tip').style.left = pixPos +'px';
    }
    });
    
    r.onmousedown = (function(e){
       isDragging = true;
        r.addEventListener('mousemove',moveTip,false);
     });
    r.onmouseup = (function(e){
    isDragging = false;
    r.removeEventListener('mousemove',moveTip);
     document.getElementById('tip').style.display = 'none';
    });
    The code above could be tidied up a bit but is a good starting point
    • Marked as answer by Song Tian Thursday, May 2, 2013 9:11 AM
    Monday, April 29, 2013 4:38 PM